Задать вопрос
@greenzlat

Как в слайдер вставить twentytwenty?

Подскажите как плагин twentytwenty вставить в слайдер - например в swiper?
Задача такая: использую плагин twentytwenty (фото ДО и ПОСЛЕ) и таких пар фото ДО-ПОСЛЕ несколько. И эти пары надо вставить в слайдер. Чтобы каждую пару можно было пролистывать.
60c1c0ad94fd6880521214.jpeg

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

<div class="do_posle">
  <link href="catalog/view/theme/default/stylesheet/twentytwenty/twentytwenty.css" rel="stylesheet" type="text/css" />
  <script src="catalog/view/javascript/twentytwenty/jquery.event.move.js" type="text/javascript"></script>
  <script src="catalog/view/javascript/twentytwenty/jquery.twentytwenty.js" type="text/javascript"></script>
  <div class="swiper-object">
    <div class="swiper-container swiper-hits">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div id="before-after1" class="bg_after">
            <img src="image/catalog/moi-raboti/1/1.jpg" class="img-responsive">
            <img src="image/catalog/moi-raboti/1/1-1.jpg" class="img-responsive">
          </div>
          <script>
          $(window).load(function() {
            $("#before-after1").twentytwenty();
          });
          </script>
        </div>
        <div class="swiper-slide">
          <div id="before-after2" class="bg_after">
            <img src="image/catalog/moi-raboti/1/1.jpg" class="img-responsive">
            <img src="image/catalog/moi-raboti/1/1-1.jpg" class="img-responsive">
          </div>
          <script>
          $(window).load(function() {
            $("#before-after2").twentytwenty();
          });
          </script>
        </div>
      </div>
    </div>
    <div class="swiper-button-next swiper-hits-next"></div>
    <div class="swiper-button-prev swiper-hits-prev"></div>
  </div>
  <script>
  $('.swiper-object .swiper-hits').each(function(index, value) {
    var mySwiper = new Swiper(value, {
      slidesPerView: 1,
      spaceBetween: 30,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      navigation: {
        nextEl: '.swiper-hits-next',
        prevEl: '.swiper-hits-prev',
      },
    });
  });
  </script>
</div>
  • Вопрос задан
  • 225 просмотров
Подписаться 1 Сложный Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы