Swiper версии 4 - переход плавного перехода для слайдов не работает

Я пробовал различные исправления для этого, но мне не повезло.

Я хочу, чтобы у слайдов был эффект затухания, а также автозапуск всего слайдера. Я пробовал примеры из документации Swiper, следуя этому примеру, но с последней версией swiper: https://codepen.io/michiel-huiskens/pen/WwqLew, следуя приведенному здесь примеру пользователя YarGnawh: https://github.com/nolimits4web/swiper/issues/1177 и исправление CSS, упомянутое в этой теме: https://github.com/nolimits4web/swiper/issues/1098.

Ни один из них не работал, и я тоже пробовал различные комбинации параметров. Вот что у меня есть сейчас: https://codepen.io/gojiHime/pen/GVQgzm

    var homeSwiper = new Swiper(".home-swiper-container", {
      fadeEffect: { crossFade: true },
      virtualTranslate: true,
      autoplay: 2500,
      speed: 1000,
      autoplayDisableOnInteraction: true,
      slidersPerView: 1,
      effect: "fade"
    });

Похоже, он работал в более старых версиях, поскольку это перо кода работает и использует более старую версию: https://codepen.io/michiel-huiskens/pen/WwqLew

Любые идеи?


jquery swiper
person Dejsa Cocan    schedule 06.08.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Согласно документации для Swiper 4.5 свойство autoplay должно быть либо логическим, либо объект:

автовоспроизведение: объект с параметрами автовоспроизведения или логическим значением true для включения с настройками по умолчанию

autoplay: {
    delay: 2500,
},

autoplayDisableOnInteraction теперь также является частью объекта autoplay (disableOnInteraction):

autoplay: {
    ...
    disableOnInteraction: true,
},

Здесь можно увидеть рабочую скрипку

И с вашим кодом:

var homeSwiper = new Swiper(".home-swiper-container", {
  fadeEffect: { crossFade: true },
  virtualTranslate: true,
  autoplay: {
      delay: 2500,
      disableOnInteraction: true,
  },
  speed: 1000, 
  slidersPerView: 1,
  effect: "fade"
});

Также похоже, что у вас есть опечатка: slidersPerView должно быть slidesPerView

person Brett Gregson    schedule 06.08.2019
comment
Да, это работает. Боже, я тупой ›_‹ Хотя спасибо за помощь! - person Dejsa Cocan; 06.08.2019

arrow_upward
1
arrow_downward

используйте импорт js следующим образом:

import Swiper, {Navigation, Pagination, Autoplay, EffectFade} from 'swiper';
Swiper.use([Navigation, Pagination, Autoplay, EffectFade]);

И scss импортирует следующим образом:

@import 'node_modules/swiper/swiper';
@import 'node_modules/swiper/components/effect-fade/effect-fade';
person alex ghotep    schedule 08.06.2021