Swiper + AOS - щелчок по кружочку пагинации, запуск анимации AOS - PullRequest
Новая
       11

Swiper + AOS - щелчок по кружочку пагинации, запуск анимации AOS

0 голосов
/ 24 марта 2020

Использование плагина Swiper Slider. Теперь нашему клиенту нужна анимация при скольжении. мы используем 2 изображения для каждого слайда. 1-е изображение должно перевернуться вправо. 2-е изображение переворачивается влево.

Мой код отлично работает при загрузке. Но, когда я нажимаю на кружок нумерации страниц, слайды движутся. Но анимация AOS не инициируется. AOS анимация работает нормально, когда я использую предыдущую или следующую стрелку. Но, согласно нашему дизайну, нам нужно скрыть стрелку «Предыдущая / следующая».

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

Спасибо 

if ($(element).find('.swiper-slide').length > 1){
  let swiper;
  swiper = new Swiper( $(element), {
    init: false,
    loop: true,
    slidesPerView: 1,
    autoplay: autoplayOpts,
    pagination: {
      type: 'bullets',
      el: $(element).find('.swiper-pagination'),
      clickable: true,
      renderBullet: function (index, className) {
        var thumbnail = ( typeof slides.eq(index).data('thumbnail') != 'undefined' ) ? '<img class="img-fluid" src="' + slides.eq(index).data('thumbnail') + '">' : '';
        return '<span class="' + className + '"> ' + thumbnail + ' </span>';
      },
      navigation: {
        nextEl: $(element).find('.swiper-button-next'),
        prevEl: $(element).find('.swiper-button-prev'),
      },
      on: {
        slideChangeTransitionStart: function () {
          AOS.init();
        },
        slideChangeTransitionEnd: function () {
          AOS.init();
        }
      }
    }
  });
  $(document).ready(() => {
    swiper.init();
    AOS.init();
  });
}
...