0

我使用 owl carausel 创建了一个滑块，在其中我将边框和 myClass 添加到滑块的第一个活动元素。它的工作正常。但现在我想在 owl.carousel.2.0.0-beta.2.4 中更新，但有些功能已被弃用，如 afterMove，所以我没有找到合适的方法来更新这个滑块。请建议我正确的道路。提前致谢。

我的代码如下：

          $(document).ready(function(){
                 $("#owl-demo").owlCarousel({

                        autoPlay: 3000, //Set AutoPlay to 3 seconds
                        responsive: true,
                        loop: true,
                        addClassActive: true,
                        items: 4,
                        stopOnHover:true,
                        afterMove:function(){
                            //console.log(1);
                            $(".owl-item").css({
                                border: 'none',
                            })
                            $(".owl-item").removeClass( "myClass" );
                            $(".active").eq(0).css({
                                border: '2px solid red',

                            })
                            $(".active").eq(0).addClass( "myClass");
                            var myValue = $( ".myClass" ).find('.dd').html();
                            $("#content").html(myValue);

                        },
                        afterInit:function(){
                            $(".active").eq(0).css({
                                border: '2px solid red',
                            })
                            $(".active").eq(0).addClass( "myClass");
                            var myValue = $( ".myClass" ).find('.dd').html();
                            $("#content").html(myValue);
                        }

                    });

          });
4

1 回答 1

2

OwlCarousel2 有另一种使用回调的方式，并且有许多回调，但名称已更改

您可以在此处查看所有回调 http://www.owlcarousel.owlgraphic.com/docs/api-events.html#carousel

在这种情况下，您应该像这样更新您的代码

$(document).ready(function(){
  $("#owl-demo").owlCarousel({
    autoPlay: 3000, //Set AutoPlay to 3 seconds
    responsive: true,
    loop: true,
    items: 4,
    autoplayHoverPause:true,
    onInitialize: callback,
    onTranslated: callback // aftermove callback
  });

  function callback(onInitialize) {
    //console.log(1);
    $(".owl-item").css({
      border: 'none',
    })
    $(".owl-item").removeClass( "myClass" );
    $(".active").eq(0).css({
      border: '2px solid red',

    })
    $(".active").eq(0).addClass( "myClass");
    var myValue = $( ".myClass" ).find('.dd').html();
    $("#content").h
  }

  function callback(onTranslated) {
    $(".active").eq(0).css({
      border: '2px solid red',
    })
    $(".active").eq(0).addClass( "myClass");
    var myValue = $( ".myClass" ).find('.dd').html();
    $("#content").html(myValue);
  }

});
于 2016-03-03T12:28:41.093 回答