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

Question

我正在尝试将自定义类 "Big, Medium, Medium" 添加到 3 个不同的 owl 项目。但这仅在自动播放时有效。当您第一次看到它时，它不起作用。我怎样才能运行在页面上加载此代码？

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

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

How can I add class to Owl-item on page load?

javascript

jquery

owl-carousel