Решено. Слайдер Swiper не прокручивает слайды если количество в slidesPerView равно количеству, слайдов

Столкнулся с одним багом, а может это так задумал разработчик Swiper Slider, что если количество слайдов равно количеству указанных для показа в параметре slidesPerView, то кнопки навигации и сама прокрутка слайдера отключается. Вроде бы логично не прокручивать, то чего и нет, но заказчику это сложно объяснить, поэтому я начал разбираться в проблеме. 

Описание проблемы

Вы создали слайдер на 4 слайда и хотите чтобы отображалось 4 слайда и при этом прокрутка работала.

HTML:

<div class="swiper3">
            <div class="swiper-wrapper">
                <!-- 4 слайда -->
                <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
               <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
                <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
                <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
                
            </div>
</div>

JS:

const swiper3 = new Swiper('.swiper3', {
    direction: 'horizontal',
    loop: true,
   
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.next-btn-3',
        prevEl: '.prev-btn-3',
    },
    allowSlidePrev: true,
    allowSlideNext: true,
   
    breakpoints: {
        1024: {
            slidesPerView: 4,
          
            spaceBetween: 20
        },
        768: {
            slidesPerView: 3,
            spaceBetween: 30
        },
        640: {
            slidesPerView: 2,
            spaceBetween: 20
        },
       480: {
            slidesPerView: 1,
            spaceBetween: 10
        },
        320: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
});

На выходе получаем, что у слайдера отсутствует навигация и он перестал прокручиваться.

Что говорит документация?

Разработчик предусмотрел такую ситуацию и добавил параметр loopAdditionalSlides, который должен клонировать слайды, но он не работает.

На гитхабе скрипта есть тема с данным багом, но пока проблема не решена.

Решение №1. Скопировать слайды

Если вы можете управлять HTML-кодом и у вас не плагин в какой-нибудь CMS, то просто скопируйте слайды. Из 4 слайдов получаем шесть и слайдер заработает.

<div class="swiper3">
            <div class="swiper-wrapper">
                <!-- Было 4 -->
                <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
                <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
               <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
                <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
                  <!-- Стало 6 -->
                  <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
                <div class="swiper-slide">
                    <img src="/wp-content/uploads/team1.png" alt="">
                </div>  
            </div>
</div>

Решение №2. Скорректировать скрипт Swiper.

Мне больше понравилось это решение, так не нужно дополнительно ничего клонировать в HTML, подойдет для динамической реализации слайдера и слайды не повторяются. Добавляем опцию события Swiper, чтобы добавить копию слайдов при инициализации.

on: {
        init: function loopBagFix(swiper){
            /* Клонируем слайды */
            const slides = swiper.slides
            const wrapper = swiper.wrapperEl
            slides.forEach( (slide) => {wrapper.append(slide.cloneNode(true))} )

            /* Удалите если проблема с пагинацией */
            setTimeout(() => {
                const paginations = swiper.pagination.bullets
                paginations.forEach((pagination, index) => {
                    if(index > (paginations.length / 2) - 1){
                        pagination.remove()
                    }
                })
            },100) 
        },
    }

В моем случаем получается такой скрипт:

const swiper3 = new Swiper('.swiper3', {
    direction: 'horizontal',
    loop: true,
   
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.next-btn-3',
        prevEl: '.prev-btn-3',
    },
    allowSlidePrev: true,
    allowSlideNext: true,
   
    breakpoints: {
        1024: {
            slidesPerView: 4,
          
            spaceBetween: 20
        },
        768: {
            slidesPerView: 3,
            spaceBetween: 30
        },
        640: {
            slidesPerView: 2,
            spaceBetween: 20
        },
       480: {
            slidesPerView: 1,
            spaceBetween: 10
        },
        320: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
  on: {
        init: function loopBagFix(swiper){
            /* Клонируем слайды */
            const slides = swiper.slides
            const wrapper = swiper.wrapperEl
            slides.forEach( (slide) => {wrapper.append(slide.cloneNode(true))} )

            /* Удалите если проблема с пагинацией */
            setTimeout(() => {
                const paginations = swiper.pagination.bullets
                paginations.forEach((pagination, index) => {
                    if(index > (paginations.length / 2) - 1){
                        pagination.remove()
                    }
                })
            },100) 
        },
    }
});

Результат

Ну вот и все. Удачных проектов!