Dawn 11.0.0 - Auto scrolling collection carousel

[yoomzy]

Hi guys! I’d like to make my featured collection carousel and mobile swipe automatically slide from product to product (infinitely)

I’ve been trying to turn dawn’s carousel/mobile swiper into an automatic slider, but can’t seem to figure it out.

as always, any and every bit of help is greatly appreciated. Thanks in advance! 🙂

Store url: https://hjskr1-testing.myshopify.com

password: enter

[BSS-Commerce]

Hi @yoomzy ,

You can create a Carousel on your page as follows:
Step 1: Go to Themes  -> Edit code

Step 2: Then find the file that displays the above interface, which can be one of the following files:

Step 3: Write an additional ID for the slider-component tag:
<slider-component id="carousel" class="slider-mobile-gutter slider-component-desktop scroll-trigger animate--slide-in">
<!-- ... items in your slider ... -->
</slider-component>

Step 4: CSS: Style your slide as you want.

#carousel {
  overflow: hidden;
  width: 100%; /* Đảm bảo slider chiếm toàn bộ chiều rộng của container cha */
}

#carousel ul {
  display: flex;
  transition: transform 0.5s ease; /* Hiệu ứng chuyển động */
}

Step 5: Javascript&colon; Use JavaScript to perform automatic carousel effects. Here's an example of how to do this: it can be written in the global.js or theme.js file

const carousel = document.getElementById('carousel');
const slider = carousel.querySelector('ul');
const slides = slider.querySelectorAll('li');

let currentIndex = 0;
const slideWidth = slides[0].offsetWidth; 

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
}

function updateSlider() {
  const offsetX = -currentIndex * slideWidth;
  slider.style.transform = `translateX(${offsetX}px)`;
}

setInterval(nextSlide, 3000);

Hope it helps @yoomzy ! 

[BelgiumBaitShop]

Hi, I have used your code but this does not seem to work. I am using the dawn theme v12,0. 

What happens with my feature collection is that the whole collection just moves to the side every 3 seconds. After a while it is completely of my website and then come back. There is no scrolling on the carrousel itself.