1

Почему не происходит переключения слайдов при клике по thumbs у второго слайдера? Т.е. навигация (thumbs) у второго слайдера листается отдельно от самого слайдера. Т.е. хочу, чтобы каждый слайдер с thumbs жил своей жизнью. А не как сейчас. Что нужно поправить?

$(document).ready(function() {
  var productSlider = new Swiper('.product-slider', {
    navigation: {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
    },
    spaceBetween: 10
  });
  var productThumbs = new Swiper('.product-thumbs', {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical'
  });
  productSlider[0].controller.control = productThumbs;
  productThumbs[0].controller.control = productSlider;
});
body {
  margin-top: 30px;
}
.product-slider {
  height: 430px;
  box-shadow: 0 0 15px #ECECEC;
 }
 
.product-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs {
  height: 430px;
}

/* Play around with this. Maybe your project does not use a vertical
thumbnail slider, but instead a horizontal one. You'd have to change the
margin-left values for this */
.product-thumbs .swiper-wrapper {
  margin-top: calc(-100% + 5px);
}

.product-thumbs .swiper-slide {
  width: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs .swiper-slide-active {
  border: solid 2px #ECECEC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="swiper-container product-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
        </div>
        <div class="swiper-button-next">
          <i class="fa fa-chevron-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa fa-chevron-left"></i>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="swiper-container product-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<br><br>

<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="swiper-container product-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
        </div>
        <div class="swiper-button-next">
          <i class="fa fa-chevron-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa fa-chevron-left"></i>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="swiper-container product-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ответ 1

0

документация для productslider добавил опцию thumbs

$(document).ready(function() {
  var productSlider = new Swiper('.product-slider', {
    navigation: {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    },
    spaceBetween: 10,
    thumbs: {
      swiper: productThumbs
    }
  });
  var productThumbs = new Swiper('.product-thumbs', {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical'
  });
  productSlider[0].controller.control = productThumbs;
  productThumbs[0].controller.control = productSlider;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="swiper-container product-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
        </div>
        <div class="swiper-button-next">
          <i class="fa fa-chevron-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa fa-chevron-left"></i>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="swiper-container product-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<br><br>

<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="swiper-container product-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
        </div>
        <div class="swiper-button-next">
          <i class="fa fa-chevron-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa fa-chevron-left"></i>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="swiper-container product-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

4
  • Спасибо большое!
    – z_u_l
    11 ноя 2019 в 15:52
  • @z_u_l, не за что, желаю успехов!)
    – meine
    11 ноя 2019 в 16:02
  • прошу прощения, но походу слайдеры всё-таки не работают как надо) В документации сначала инициализируется объект со слайдером, который thumbs, а потом основной слайдер. Но если productThumbs и productSlider поменять местами, то все поломается. И вылезет ошибка Cannot read property '$el' of null swiper thumbs. ссылка - записал экран. Когда листается первый слайдер - всё ок. А когда второй - все как-то по отдельности листается.
    – z_u_l
    11 ноя 2019 в 16:34
  • Вы случайно не знаете, как синхронности добиться?
    – z_u_l
    11 ноя 2019 в 16:36

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.