bootstrap-shopify-theme/src/snippets/featured-slider.js

A free [**Shopify Theme**](https://github.com/maxvien/bootstrap-shopify-theme) built with [**Bootstrap**](https://getbootstrap.com/), [BEM](http://getbem.com/), [Theme Tools](https://shopify.dev/tools/themes), [Swiper](https://swiperjs.com/), [Gulp](https

import Swiper from 'swiper';

const sections = document.querySelectorAll('.snippet-featured-slider');

sections.forEach((section) => {
  const swiperContainer = section.querySelector('.swiper-container');
  const prevBtn = swiperContainer.querySelector('.carousel-control-prev');
  const nextBtn = swiperContainer.querySelector('.carousel-control-next');

  const swiper = new Swiper(swiperContainer, {
    loop: true,

    slidesPerView: 1,
    spaceBetween: 0,
    breakpoints: {
      576: {
        slidesPerView: 2,
        spaceBetween: 30,
      },
      768: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
      992: {
        slidesPerView: 4,
        spaceBetween: 30,
      },
    },
  });

  prevBtn.addEventListener('click', () => {
    swiper.slidePrev();
  });

  nextBtn.addEventListener('click', () => {
    swiper.slideNext();
  });
});