Question

我在滑块上工作，其中包含两个同步的猫头鹰滑块。 sync1是主滑块，sync2是缩略图滑块。当我点击第二个滑块的一个元素时，sync1转到正确的幻灯片。现在我的问题是：

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

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

我认为我应该使用“position：absolute”添加div，它可以支持点击元素，但我不知道该怎么做。请帮忙！ :)

这是我的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');
});

在旋转木马项目中有“some-class”的空div，当你点击这个元素类时，“active”会被添加

OWL Carousel 2将项目添加到项目中

1 个答案: