OWL 轮播 2 添加 class 到项目

Question

我正在处理包含两个同步 owl 滑块的滑块。 sync1 是主滑块，sync2 是缩略图滑块。当我单击第二个滑块的元素之一时，sync1 会转到正确的幻灯片。现在开始我的问题：

当用户点击任何缩略图时，绿色边框应该出现在点击的元素上，并且应该一直留在那里直到点击另一个元素。

我尝试使用 jquery .addClass 和 .css 但没有任何反应。

我认为我应该添加 div 和 "position: absolute" 以支持单击的元素，但我不知道该怎么做。请帮忙！ :)

这是我的js

$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var index2=0;
var flag=true;


var slides = sync1.owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout:5000,
    autoplayHoverPause:true,
    nav: false,
    mousedrag: false,
    touchdrag: false,
    pulldrag: false

});

$(document).on('click', '.prevbutton, .nextbutton',function() {
    sync1.trigger('stop.owl.autoplay');

});

sync1.on('changed.owl.carousel', function(event) {
    var index1=event.item.index;
    var index11 = index1-2;
    //console.log("index1", index1)
    //console.log("index11", index11);
    sync2.trigger("to.owl.carousel", [index11, 100, true]);
});


$('.nextbutton').click(function() {
    //console.log(sync1);
    sync1.trigger('next.owl.carousel');

});

$('.prevbutton').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    //console.log(sync1);
    sync1.trigger('prev.owl.carousel', [500]);


});


/* thumbnails*/

var thumbnails= sync2.owlCarousel({
    items: 6,
    loop: true,
    autoplay: false,
    mousedrag: false,
    touchdrag: false,
    pulldrag: false,
    addClassActive: true
});
/*buttons*/
$('.nextbutton2').click(function() {
    sync2.trigger('next.owl.carousel');

});


$('.prevbutton2').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    sync2.trigger('prev.owl.carousel', [500]);


});


sync2.trigger("to.owl.carousel", [index2, 100, true]);
sync2.on('changed.owl.carousel', function(event) {
    index2=event.item.index;
    //console.log("index2", index2);
    index22=index2-1;
    // sync1.trigger("to.owl.carousel", [index22, 100, true]);
});
// console.log("index2", index2);

sync2.on('click', '.item', function(e) {
    e.preventDefault();
    sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index()-6, 300, true]);
    // console.log("clicked index", $(e.target).parents('.owl-item').index())

});



$('#stopcontainer').on('mouseover', function(){

    if ($('#stopcontainer:hover').length != 0) {
        flag=true;
        console.log("flaga", flag);
    }
    if (flag==true) {
        sync1.trigger('stop.owl.autoplay');
        console.log("mousein");
    }

}).on('mouseleave',  function() {
        setTimeout(
            function()
            {
                if ($('#stopcontainer:hover').length == 0) {
                    flag=false;
                    console.log("flaga", flag);
                }
                if(flag==false){
                    console.log('mouse leave');
                    sync1.trigger('play.owl.autoplay');
                }

            }, 5000)}
);

});

Answer 1

解决方法如下：

sync2.on('click', '.owl-item', function(e) {
    e.preventDefault();
    $('.some-class').removeClass('active');
    $(this).find('.some-class:first').addClass('active');
});

轮播项目内有空 div 和 "some-class"，当您单击此元素时 class 添加 "active"

OWL 轮播 2 添加 class 到项目

OWL Carousel 2 adding class to item

javascript

jquery

owl-carousel

owl-carousel-2