@ravlex

Как реализовать карусель превью с выводом большого изображения?

Собственно нужно сделать так:
972f2c395bb947189ce7884875ee4b1e.jpg
Я пытаюсь сделать таким образом: 1. Сделал разметку и выводу превью в основное окно. 2. Подключаю owl-carousel и пытаюсь связать скрипт с выводом и каруселью.

$('.item>img').click(function() {
  var src = $(this).prop('src');
  $('#big_img').html('<img src="' + src + '">');
}); //При клике по изображению из карусели, вывожу в .big_img фотографию.

$("#owl-demo-tovar").owlCarousel({
  items: 3,
  itemsDesktop: [1199, 3],
  itemsDesktopSmall: [979, 3],
  lazyLoad: true,
  autoPlay: false,
  mouseDrag: false,
  addClassActive: true

}); //Сам скрипт OWL-Carousel


<div id="big_img">Вывожу сюда основное фото большого размера</div>

<div id="owl-demo-tovar">
  <div class="item">
    <img class="lazyOwl" src="<?php echo $image['thumb']; ?>" />
  </div>
  <div class="item">
    <img class="lazyOwl" src="<?php echo $image['thumb']; ?>" />
  </div>
  <div class="item">
    <img class="lazyOwl" src="<?php echo $image['thumb']; ?>" />
  </div>
</div>


Как сделать так, чтобы всегда был активным второй элемент (даже при прокрутке слайдов), который по центру? И чтобы он сразу же выводился в блок с большим фото. Буду очень признателен за помощь. С jQuery на "Вы", по этому прошу помощи.
  • Вопрос задан
  • 2596 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

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

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