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")
});

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

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

диана1975,
потому стираите jQuery(".owl-carousel") при выборе в селекторе, обьект с таким классом исчезает со страницы

А как сделать, чтобы активная картинка-миниатюра выделялась? При клике на кнопки да/нет активная миниатюра не выделяется

диана1975,
если вы убили слайдер то почему там что-то должно выделятся

профессор, как убила? он же живой

диана1975,
стал немного живее, ищите куда в css пропал класс select?

нашла не сама... спасибо за потраченное на меня время

подскажите, пожалуйста, что надо дописать в скрипте, чтобы при изменении количества товара и выборе цвета камня слайдер исправно работал?
ссылка

код:

function owlForDiana(){

jQuery("#list_product_image_middle a.lightbox").wrapAll("<div class='owl-carousel owl-image-middle'></div>");
var owl = jQuery(".jshop.productfull .owl-carousel.owl-image-middle");
   owl.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(".owl-item.active a").css("display","block");
    });
	owl.on("translated.owl.carousel", function(event) {
       	jQuery(".owl-item.active a").css("display","block");
    });
    jQuery(".jshop_img_thumb").removeAttr("onclick").off().each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,length]);
        });
    }).first().addClass("select");
	
}
jQuery(function(){
jQuery(document).ajaxComplete(function(event, xhr, settings){
if (settings.url.indexOf('ajax_attrib_select_and_price')!==-1){
owlForDiana();
}
});	
owlForDiana();
});
</script>

помогите доделать начатое

эй, яваскриптовые гуру, вы куда все попрятались, невыполнимая задача?
тема закрыта, мир не без добрых людей, помогли

Здравствуйте, не буду плодить лишние темы, вопрос по той же карусели.
Вот моя страница товара:
http://adellin.ru/zoloto/koltso-iz-b...-roberto-bravo

Это скрипт карусели:

<script type="text/javascript">


function owlForDiana(){
<!--jQuery(".text_zoom").remove();-->
jQuery("#list_product_image_middle a.lightbox").wrapAll("<div class='owl-carousel owl-image-middle'></div>");
var owl = jQuery(".jshop.productfull .owl-carousel.owl-image-middle");
   owl.owlCarousel({
        loop: length > 1 ? true:false,
        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(".owl-item.active a").css("display","block");
		hideVideo(); 
    });
	owl.on("translated.owl.carousel", function(event) {
       	jQuery(".owl-item.active a").css("display","block");
    });
    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");
}
jQuery(function(){
jQuery(document).ajaxComplete(function(event, xhr, settings){
if (settings.url.indexOf('ajax_attrib_select_and_price')!==-1){
owlForDiana();
}
});	
owlForDiana();
});



</script>

Проблема: как видео подружить с этой каруселью? Чтобы с фото прокручивалось?
Заранее благодарна

диана1975,
тут смотрели?
https://owlcarousel2.github.io/OwlCa...mos/video.html

Уважаемый Рони, действую наощупь, т.к. знания мои в скриптах, как Вы давно поняли, на нуле.
Перешла по Вашей ссылке, долго думала, куда бы все это аккуратно вставить.
Правильно ли я действую?

не могу вам помочь, вариант по ссылке вам тоже скорее всего не поможет, попробуйте поискать помощь где-то ещё.

спасибо, оставлю, как есть