Помощь Cмена главного изображения при клике по дополнительному изображению

[ihos]

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

 

[Extremosa]

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

Я использую Slick JS или доработанную Owl Carousel 2.

 

[ihos]

Я использую Slick JS или доработанную Owl Carousel 2.

Можете поделится?

 

[Extremosa]

HTML код для вывода изображений

<div class="col-xs-12 col-sm-5 product-image">
    <div class="owl-carousel main-image">
        <?php if ($thumb) { ?>
        <div class="item"><img src="<?php echo $popup; ?>" class="img-responsive" alt="<?php echo $heading_title; ?>" itemprop="image"></div>
        <?php } ?>
        <?php foreach ($images as $image) { ?>
        <div class="item"><img src="<?php echo $image['popup']; ?>" class="img-responsive" alt="<?php echo $heading_title; ?>"></div>
        <?php } ?>
    </div>
    <div class="hidden-sm-down owl-carousel thumbnails">
        <?php if ($thumb) { ?>
        <div class="item"><img src="<?php echo $thumb; ?>" class="img-responsive" alt="<?php echo $heading_title; ?>"></div>
        <?php } ?>
        <?php foreach ($images as $image) { ?>
        <div class="item"><img src="<?php echo $image['thumb']; ?>" class="img-responsive" alt="<?php echo $heading_title; ?>"></div>
        <?php } ?>
    </div>
</div>

JS код внизу страницы + подключение библиотеки Owl Carousel 2

var CarouselOne = '.main-image';
var CarouselTwo = '.thumbnails';
var owlCarouselOne = $(CarouselOne).owlCarousel({
    items: 1,
    dots: false,
    mouseDrag: false,
    touchDrag: true
});
var owlCarouselTwo = $(CarouselTwo).owlCarousel({
    items: 5,
    margin: 10,
    dots: false,
    mouseDrag: false,
    touchDrag: false
});
carouselSyncCurrentClass();
owlCarouselOne.on('changed.owl.carousel', function() {
    carouselSyncCurrentClass();
});
owlCarouselTwo.on('changed.owl.carousel', function(event) {
    carouselSyncCurrentClass();
});
owlCarouselTwo.find('.item').hover(function() {
    var itemIndex = $(this).parent().index();
    owlCarouselOne.trigger('to.owl.carousel', itemIndex);
    carouselSyncCurrentClass();
});
function carouselSyncCurrentClass() {
    setTimeout(function() {
        var CarouselOneActiveIndex = $('.main-image .owl-item.active').index();
        $('.thumbnails .owl-item').removeClass('current');
        var currentItem = $('.thumbnails .owl-item:nth-child(' + (CarouselOneActiveIndex + 1) + ')');
        currentItem.addClass('current');
        if(!currentItem.hasClass('active')) {
            if(currentItem.prevAll('.active').length > 0) {
                owlCarouselTwo.trigger('next.owl.carousel');
            }
            if(currentItem.nextAll('.active').length) {
                owlCarouselTwo.trigger('prev.owl.carousel');
            }
        }
    }, 500);
}

Так же можно сделать вывод через lightSlider.