Swiper слайдер + анимация CSS - PullRequest
Новая
       9

Swiper слайдер + анимация CSS

0 голосов
/ 03 июня 2019

Я пытаюсь подключить анимацию (анимацию CSS) к ползунку Swiper.Анимация работает, но есть одна проблема.

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

Я не знаю, насколько хорошо я делаю, я не очень разбираюсь в JS.Посмотрите, пожалуйста, может кто-нибудь знает, как остановить прокрутку, чтобы все работало.

codepen.io / anakin-skywalker94 / pen / RmWxbE

Спасибо!

1 Ответ

0 голосов
/ 03 июня 2019

Это то, что вы ищете? 

  var swiper = new Swiper('.swiper-container', { 
    effect: 'fade',
      fadeEffect: {
    crossFade: true
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  direction: 'horizontal',
    loop: true,
    speed: 1500,
    slidesPerView: 1,
    spaceBetween: 0,
    mousewheel: false,
    //slidePrevClass: 'swiper-slide-prev animated rotateOut',
    //slideActiveClass: 'swiper-slide-active animated bounce',
    //slideNextClass: 'swiper-slide-next animated rotateOut',   
    pagination: {
    el: '.swiper-pagination',
      type: 'custom',
      clickable: true,
      renderCustom: function (swiper, current, total) {
        function numberAppend(d) { return (d < 10) ? '0' + d.toString() : d.toString(); }
          return '<span>' + numberAppend(current) + '</span>' + ' <span></span> ' + '<span>' + numberAppend(total) + '</span>'; 
         }
       },
    });

Я в основном обновил ваши js для использования эффекта затухания и удалил некоторые ваши анимации.

...