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

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

1 个答案: