Почему когда задаю эффект «fade» и параметр «loop» не переключаются слайды?

Question

[Vadim]

Когда задаю эффект "fade" и включаю бесконечный цикл слайдов через параметр "loop", слайды не переключаются при нажатии на кнопки навигации. Хотя по свайпу переключаются. Если убрать параметр "loop" начинают переключаться и по кнопкам.

const hero_slider = new Swiper('.hero-slider', {
        modules: [Navigation, EffectFade],
        loop: true,
        effect: "fade",
        fadeEffect: {
            crossFade: true
        },
        navigation: {
            nextEl: '.khutorok-slider-button_next',
            prevEl: '.khutorok-slider-button_prev',
            disabledClass: "khutorok-slider-button_disabled",
        },
    });

В данном коде задан "loop: true" и слайды по кнопкам навигации не меняются.

Comments

[Vadim]

Lapita12,

const slider_btn_next = document.querySelector('.khutorok-slider-button_next');
slider_btn_next.addEventListener('click', function() {
        console.log(1);
        hero_slider.slideNext();
    });

При нажатии на кнопку "next" 1 в консоль выводится, а слайды по прежнему не переключаются

[Lapita12]

Vadim,

const hero_slider = new Swiper('.hero-slider', {
  modules: [Navigation, EffectFade],
  loop: true,
  effect: "fade",
  fadeEffect: {
    crossFade: true
  },
  navigation: {
    nextEl: '.khutorok-slider-button_next',
    prevEl: '.khutorok-slider-button_prev',
    disabledClass: "khutorok-slider-button_disabled",
  },
});

const slider_btn_next = document.querySelector('.khutorok-slider-button_next');
slider_btn_next.addEventListener('click', function() {
  hero_slider.slideNext();
});

const slider_btn_prev = document.querySelector('.khutorok-slider-button_prev');
slider_btn_prev.addEventListener('click', function() {
  hero_slider.slidePrev();
});

[Vadim]

Lapita12, Вставил ваш код и ничего не изменилось. Слайдер один раз перелистывается (это было раньше), а дальше не хочет. Клик на кнопки вперед и назад работает (проверил через console.log). По свайпу перелистывается.

Answer 1

[Vadim]

Проблема решилась подключением файла "swiper-bundle.css" вместо "swiper.css"

Answer 2

[Taulan Khatuaev]

Чтобы решить эту проблему, вы можете использовать опцию "autoplay" вместо "loop".

const hero_slider = new Swiper('.hero-slider', {
    modules: [Navigation, EffectFade],
    effect: "fade",
    fadeEffect: {
        crossFade: true
    },
    autoplay: {
        delay: 5000, // время задержки между слайдами
        disableOnInteraction: false, // слайды будут продолжать автоматически переключаться при нажатии на кнопки навигации
    },
    navigation: {
        nextEl: '.khutorok-slider-button_next',
        prevEl: '.khutorok-slider-button_prev',
        disabledClass: "khutorok-slider-button_disabled",
    },
});

Comments

[Vadim]

Мне нужно бесконечное перелистывание слайдов, чтобы после последнего слайдер перелистывал на первый слайд. Вставил ваш код и после последнего слайда, слайдер останавливается