Infinite Constant Logo Carousel Section

[SpaPlusLtd]

I have a logo carousel section at the end of the homepage on my website.

The logos section shows in 2 sections then the section goes blank as you can see. How do I make it so that the carousel is constantly scrolling from left to right so the beginning of the carousel shows up again at the end of the carousel?

Thank you very much in advance!

[TheUntechnickle]

Hey @SpaPlusLtd,

Thanks for sending over those details about your logo carousel issue. I had a good look at the code and can see why you're getting those blank sections at the end. The current setup is just shifting the carousel by fixed percentages, but what you need is a continuous, infinite scroll that loops seamlessly.

Here's what I'd suggest changing in your code:

document.addEventListener("DOMContentLoaded", function() {
  const carousel = document.querySelector('.carousel');
  const items = document.querySelectorAll('.carousel-item');
  
  // First, let's clone all your logos and add them to the end
  items.forEach(item => {
    const clone = item.cloneNode(true);
    carousel.appendChild(clone);
  });
  
  // Now set up the continuous scrolling animation
  let position = 0;
  const scrollSpeed = 0.5; // adjust this number for faster/slower scrolling
  
  function scroll() {
    position -= scrollSpeed;
    
    // When we've scrolled past all original logos, reset to beginning
    const itemWidth = items[0].offsetWidth + 20; // width plus margins
    const resetPoint = -itemWidth * items.length;
    
    if (position <= resetPoint) {
      position = 0;
    }
    
    carousel.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(scroll);
  }
  
  scroll();
});

And you'll need to update this bit in your CSS:

.carousel {
  display: flex;
  /* removing the transition since we're handling it in JS now */
  width: auto; /* let the content determine the width */
}

This should give you that smooth, continuous scrolling effect you're looking for. The logos will just keep moving from right to left and loop back seamlessly.

Let me know if you have any questions about implementing this! Happy to explain any part in more detail.

If you want us, we would love to do this for you for free.

Best regards,
Shubham | Untechnickle

[SpaPlusLtd]

Hi,

Thanks for your quick reply. I'm not sure which exactly which bits to change. Can you send me the code I can just replace what I currently have which is:

{% schema %}
{
"name": "Logo Carousel",
"settings": [
{
"type": "header",
"content": "Logo Carousel Settings"
}
],
"presets": [
{
"name": "Logo Carousel",
"category": "Custom"
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "logo_image",
"label": "Logo Image"
}
]
}
],
"max_blocks": 10
}
{% endschema %}

<div class="logo-carousel">
<div class="carousel">
{% for block in section.blocks %}
{% if block.settings.logo_image %}
<div class="carousel-item">
<img src="{{ block.settings.logo_image | img_url: 'medium' }}" alt="Logo" />
</div>
{% endif %}
{% endfor %}
</div>
</div>

<style>
.logo-carousel {
position: relative;
overflow: hidden;
width: 100%; /* Set to desired width */
padding: 20px 0; /* Adjust padding as needed */
}
.carousel {
display: flex;
transition: transform 1.5s ease-in-out; /* Slower animation duration (1.5 seconds) */
width: calc(100% * {{ section.blocks.size }}); /* Adjust based on the number of logos */
}
.carousel-item {
min-width: 200px; /* Adjust based on your design */
margin: 0 10px; /* Adjust spacing */
flex-shrink: 0; /* Prevent items from shrinking */
}
.carousel-item img {
max-width: 100%; /* Ensure images are responsive */
height: auto; /* Maintain aspect ratio */
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.carousel-item');
const totalItems = items.length;
let currentIndex = 0;

function showNext() {
// Move to the next logo
currentIndex = (currentIndex + 1) % totalItems;
const offset = -currentIndex * (100 / totalItems); // Calculate the offset percentage
carousel.style.transform = `translateX(${offset}%)`; // Move the carousel
}

// Change logo every 8 seconds (8000 milliseconds)
setInterval(showNext, 8000); // Slower interval for logo transition
});
</script>

[TheUntechnickle · Accepted solution]

Hey @SpaPlusLtd,

I'm not able to attach the full code here, would it be possible for you to send "hi" to our email hello@untechnickle.com so that I can share the code there and you can directly copy paste it in your file. And, later add it to this thread as well for others. 

Thanks,
Shubham | Untechnickle

[SpaPlusLtd]

I tried to replace the code with the code you sent but then it stays static.