1

同期された 2 つのフクロウ スライダーを含むスライダーに取り組んでいます。sync1 はメイン スライダーで、sync2 はサムネイル スライダーです。2 番目のスライダー sync1 の要素の 1 つをクリックすると、適切なスライドに移動します。今私の問題に行きます：

ユーザーがサムネイルのいずれかをクリックすると、クリックした要素に緑色の境界線が表示され、別の要素がクリックされるまでそこにとどまる必要があります。

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

});
4

1 に答える 1

2

解決策は次のとおりです。

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

カルーセル アイテム内に「some-class」を含む空の div があり、この要素クラスをクリックすると「active」が追加されます

于 2015-02-16T12:53:57.377 に答える