如何在页面加载时向 Owl-item 添加类？

Question

我正在尝试将自定义类“大、中、中”添加到 3 个不同的猫头鹰项目。但这仅在自动播放时有效。当你第一次看到它时，它不起作用。如何在页面加载时运行此代码？ $('#MySlider .owl-carousel').on('translate.owl.carousel', function(e){    idx = e.item.index;    $('#MySlider .owl-carousel').find('.owl-item.big').removeClass('big');    $('#MySlider .owl-carousel').find('.owl-item.medium').removeClass('medium');    $('#MySlider .owl-carousel').find('.owl-item').eq(idx).addClass('big');    $('#MySlider .owl-carousel').find('.owl-item').eq(idx+1).addClass('medium');    $('#MySlider .owl-carousel').find('.owl-item').eq(idx+2).addClass('medium'); });我希望我的代码在页面加载时看起来像这样，以便我可以设置轮播项目的样式。但它只在开始自动播放后添加类。  <div class="owl-carousel">      <div class="owl-item big active">...</div>      <div class="owl-item medium active">...</div>      <div class="owl-item medium active">...</div>      <div class="owl-item">...</div>      <div class="owl-item">...</div>  </div>

Answer 1

您可以使用onInitialized回调。这在插件初始化时调用。

$(".owl-carousel").owlCarousel({

  items: 1,

  loop: true,

  dots: false,

  onInitialized: function(event) {

    let element = jQuery(event.target);

    let idx = event.item.index;

    element.find('.owl-item.big').removeClass('big');

    element.find('.owl-item.medium').removeClass('medium');

    element.find('.owl-item').eq(idx).addClass('big');

    element.find('.owl-item').eq(idx + 1).addClass('medium');

    element.find('.owl-item').eq(idx + 2).addClass('medium');

  },

  navContainer: '#nav',

});

或者您可以使用该事件：

 $('#MySlider .owl-carousel').on('initialized.owl.carousel', function(event) {

    let element = jQuery(event.target);

    let idx = event.item.index;

    element.find('.owl-item.big').removeClass('big');

    element.find('.owl-item.medium').removeClass('medium');

    element.find('.owl-item').eq(idx).addClass('big');

    element.find('.owl-item').eq(idx + 1).addClass('medium');

    element.find('.owl-item').eq(idx + 2).addClass('medium');

  }

);