Solved

I am having trouble with my custom liquid code.

Conductor
Tourist
7 0 1

When it reaches the end the code keeps restarting i would like it to be constant.

 

 https://infinictus.com/

 

 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
<style>
.carousel-container {
overflow: hidden;
background-color: #fff;
width: 100%;
}

.carousel {
display: flex;
white-space: nowrap;
animation: scroll 20s linear infinite;
}

.carousel-item {
flex: 0 0 auto;
padding: 10px 20px;
color: green;
font-family: "Black Ops One", system-ui;
}

.carousel-item p {
margin: 0;
}

@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>

<div class="carousel-container">
<div class="carousel">
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<div class="carousel-item">
<p>Free worldwide shipping on orders over $49.99! Don't miss out!</p>
</div>
<!-- Add more items as needed to create a seamless loop -->
</div>
</div>

 

 

 

 

 

Accepted Solution (1)

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Hi!

 

Extend the duration of the animation to '20s' as specified. There must be a mandatory end point for the animation. Also, increase the number of elements inside the 'carousel-item'. Let me know if you can't do it.

 

animation: scroll 20s linear infinite;

 

Terence..

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Reply 1 (1)

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Hi!

 

Extend the duration of the animation to '20s' as specified. There must be a mandatory end point for the animation. Also, increase the number of elements inside the 'carousel-item'. Let me know if you can't do it.

 

animation: scroll 20s linear infinite;

 

Terence..

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites