0

Нужно чтобы при нажатии на миниатюры менялось главное изображение слева.

$('.cases__slider').slick({
  draggable: true,
  arrows: true,
  dots: true,
  speed: 700,
  infinite: true,
  responsive: [{
    breakpoint: 1024,
    settings: {
      arrows: false,
      dots: true
    }
  }]
});
<div class="cases__slide">
  <div class="row">
    <div class="col-lg-6">
      <img src="img/case1.jpg" alt="" class="cases__img img-responsive">
    </div>
    <div class="col-lg-6 cases__info">
      <p class="cases__title">
        Знаки для ветеранов ГЖД.
      </p>
      <p class="cases__desc">
        Знаки для ветеранов ГЖД. Знак изготовлен по эскизу заказчика. Применялась технология штамповка с гальванизацией под золото и нанесением мягких эмалей. На аверсе 3D изображение, на реверсе установлена безопасная булавка для крепления на одежду.
      </p>
      <div class="cases__thumbnails">
        <a class="cases__trigger" href="#">
          <img src="img/case1m.jpg" alt="">
        </a>
        <a class="cases__trigger" href="#">
          <img src="img/case12m.png" alt="">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="cases__slide">
  <div class="row">
    <div class="col-lg-6">
      <img src="img/case1.jpg" alt="" class="cases__img img-responsive">
    </div>
    <div class="col-lg-6 cases__info">
      <p class="cases__title">
        Значки для группы компаний "ВВК".
      </p>
      <p class="cases__desc">
        Был разработан дизайн значка с логотипом заказчика. Применялась технология штамповка с гальванизацией под серебро и нанесением мягких эмалей.
      </p>
      <div class="cases__thumbnails">
        <a class="cases__trigger" href="#">
          <img src="img/case1m.jpg" alt="">
        </a>
        <a class="cases__trigger" href="#">
          <img src="img/case12m.png" alt="">
        </a>
      </div>
    </div>
  </div>
</div>

введите сюда описание изображения

4
  • Думаю, что пример кода сильно помог бы
    – user212578
    29 янв 2018 в 15:59
  • Но похоже, что надо просто перебить CSS Slider Syncing
    – user212578
    29 янв 2018 в 16:01
  • Или тупо для слайда дописать JS меняющий картинку по клику и slick тут ни при чем
    – user212578
    29 янв 2018 в 16:02
  • Добавил пример кода. 2 слайда-отдельно файлы миниатюр и отдельно развернутое изображение. Как же тогда тупо для слайда дописать js картинку по клику? пример кода бы
    – stiv
    29 янв 2018 в 16:15

1 ответ 1

0

Получаем индекс изображения, по которому кликаем (ссылки, в данном случае), и с помощью метода slickGoTo переходим к нужному слайду.

$(".cases__thumbnails a").click(function(e) {
  e.preventDefault();
  cases__thumbnails_num = $(this).index();
  $('.cases__slider').slick('slickGoTo', cases__thumbnails_num);
})

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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