https://www.nakivo.com/res/js/new/sliders-multiple.js

1function sliders (elems) {
2  if (document.querySelector(elems)) {
3    const sliders = document.querySelectorAll(elems);
4
5    sliders.forEach((item, i) => {
6      // create and add new class to slider wrap
7      let newClass = `${elems}--${i + 1}`;
8      item.classList.add(newClass.slice(1));
9      const slidesCount = item.querySelectorAll('.swiper-slide').length;
10      const desktopSlidesPerView = Math.min(slidesCount, 3);
11      const isDesktopViewport = window.matchMedia('(min-width: 991px)').matches;
12      const shouldEnableControls = !isDesktopViewport || slidesCount > 3;
13      const shouldShowNavigation = slidesCount > 3;
14      if (!shouldShowNavigation) {
15        item.classList.add('slider-navigation-hidden');
16      }
17      // init
18      new Swiper(`${newClass} .swiper-container`, {
19        slidesPerView: desktopSlidesPerView,
20        spaceBetween: 30,
21        watchSlidesProgress: true,
22        watchSlidesVisibility: true,
23        lazy: {
24          loadPrevNext: true,
25        },
26        autoplay: shouldEnableControls
27          ? {
28              delay: 7000
29            }
30          : false,
31        speed: 300,
32        loop: true,
33        autoHeight: true,
34        simulateTouch: false,
35        navigation: shouldShowNavigation
36          ? {
37              nextEl: `${newClass} .swiper-button-next`,
38              prevEl: `${newClass} .swiper-button-prev`,
39            }
40          : false,
41        pagination: {
42          el: `${newClass} .swiper-pagination`,
43          clickable: true
44        },
45        breakpoints: {
46          0: {
47            slidesPerView: 1
48          },
49          767: {
50            slidesPerView: 2,
51            autoHeight: false,
52            simulateTouch: true,
53          },
54          991: {
55            slidesPerView: desktopSlidesPerView,
56            autoHeight: false,
57          }
58        }
59      });
60    });
61  }
62}
63
64sliders('.js-slider-multiple');