Dawn 11.0.0 - Auto scrolling collection carousel

yoomzy
Shopify Partner
13 0 3

IMG_6489.png

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

Replies 2 (2)

BSS-Commerce
Shopify Expert
3477 461 519

Hi @yoomzy ,

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

 

view - 2023-10-31T170142.033.png

 

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

 

view - 2023-10-31T170308.722.png

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 ! 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BelgiumBaitShop
Tourist
10 0 1

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. 

Scherm­afbeelding 2024-02-18 om 03.40.09.pngScherm­afbeelding 2024-02-18 om 03.40.17.png