owl carousel 2
 

Всем привет. Установила себе owl carousel 2 базовую: http://www.owlcarousel.owlgraphic.com/demos/basic.html.
Но хочу вместо кнопок навигации картинки-миниатюры, в инете нашла решение только для owl carousel : https://jsfiddle.net/j1fjk201/13/.
Как бы мне для моей карусельки такое сделать?

С нетерпением жду совета

диана1975,
как-то так ... .removeAttr("onclick").off() ... добавлено чтоб убрать прежние клики

jQuery(document).ready(function() {
    var owl = jQuery(".owl-carousel").owlCarousel({
        loop: true,
        dots: true,
        margin: 10,
        nav: true,
        navText: ["<", ">"],
        items: 1
    });
    jQuery(".jshop_img_thumb").removeAttr("onclick").off().each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,1000])
        })
    })
});

Спасибо, рони, но это еще не все: как выделить активную картинку-миниатюру, не знаю, как через css сделать, если бы к ней добавлялся какой-нибудь активный класс, подскажите, пожалуйста

диана1975,
:-? после 12 строки

jQuery(".jshop_img_thumb").removeClass("select");
jQuery(el).addClass("select");

диана1975,
как боротся со встроенными dots не подскажу

спасибо за своевременную помощь

Рано радовалась...
Картинка-миниатюра выделяется при клике на нее, а при нажатии на кнопки вперед-назад (навигация) замирает, а должен наблюдаться такой же эффект
Рони, не могу идти дальше, пока полностью не разберусь со слайдером. Прошу помощи, в ява скриптах полный ноль...

диана1975,
раздел работа для такого есть или читать документацию и пробовать ... меняйте всё на это

jQuery(document).ready(function() {
    var owl = jQuery(".owl-carousel").owlCarousel({
        loop: true,
        dots: true,
        margin: 0,
        nav: true,
        navText: ["<", ">"],
        items: 1
    });
    owl.on("changed.owl.carousel", function(event) {
        jQuery(".jshop_img_thumb").removeClass("select").eq(event.page.index).addClass("select")
    });
    jQuery(".jshop_img_thumb").removeAttr("onclick").off().each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,1000])
        })
    }).first().addClass("select")
});

Настоящий полковник...
спасибо!!

Я дико извиняюсь, но это, оказывается, еще не все. Стоило мне нажать на кнопку выбора товара с футляром или без в карточке товара и моего многострадального слайдера как не бывало, почему так? прошу помочь довести дело до конца