Доделать функционал slick slider?

139
30 января 2018, 11:27

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

$('.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>

Answer 1

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

$(".cases__thumbnails a").click(function(e) {
  e.preventDefault();
  cases__thumbnails_num = $(this).index();
  $('.cases__slider').slick('slickGoTo', cases__thumbnails_num);
})
READ ALSO
Не выводит весь результат
PHP

Не выводит весь результат

Моя проблема такова

 251
php artisan migrate не выполняет миграцию laravel
PHP

php artisan migrate не выполняет миграцию laravel

Использую OpenServer HTTP: Apache-PHP-7-Nginx-119 PHP: PHP-7-x64 MySQL-5

 344
Уведомление на Android
PHP

Уведомление на Android

У меня есть сайт с регистрацией и общим чатом(php,mysql), как мне сделать так , чтобы когда в чат кто то напишет, мне приходило уведомление на телефон...

 300
php mysql изменение запроса
PHP

php mysql изменение запроса

Есть следующий запрос:

 195