Javascript Owl Carousel custom navigation with small image previews

Question

I am trying to make custom image carousel with owl carousel, i want to have large image in center with nav arrows on its sides, and below preview(thumbnail) of other images in gallery . exactly like in image below

i couldnt find ( dont know how to search) if there is already existing option in owl or how to customize it

Answer 1

Here is a working example. I hope it helps.

Working eample

CSS

body {
  background-color: #fff;
}

#my-carousel {
  width: 960px;
  margin: 0 auto;
}

#my-carousel .item img {
  width: 100%;
}

.owl-next,
.owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}

.owl-prev {
  left: 10px;
}

.owl-next {
  right: 10px;
}

.navigation-img-wrapper {
  margin-top: 4px;
  text-align: center;
}

.navigation-img-wrapper .navigator {
  display: inline-block;
  width: 150px;
  height: 100px;
  text-align: center;
  background-color: pink;
  line-height: 100px;
  color: white;
  font-size: 50px;
  cursor: pointer;
  border-radius: 6px;
}

.navigation-img-wrapper .navigator.active {
  color: white;
  background: red;
}

Jquery

$(document).ready(function() {


$('#my-carousel').on('initialized.owl.carousel', function() {
    $('.navigator').eq(0).addClass('active');
    console.log('initialized');
});

$('#my-carousel').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 3000,
    nav: true,
    navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
    singleItem: true,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 1
        },
        1000: {
            items: 1
        }
    }
});

$('#my-carousel').on('changed.owl.carousel', function(ev) {
    var item_index = ev.page.index;
    $('.navigator').removeClass('active').eq(item_index).addClass('active');
});

$('.navigator').on('click', function() {
    var item_no = $(this).data('item');
    $('#my-carousel').trigger('to.owl.carousel', [item_no, 1000, true]);
});

});