如何在页面加载时向 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({&nbsp; items: 1,&nbsp; loop: true,&nbsp; dots: false,&nbsp; onInitialized: function(event) {&nbsp; &nbsp; let element = jQuery(event.target);&nbsp; &nbsp; let idx = event.item.index;&nbsp; &nbsp; element.find('.owl-item.big').removeClass('big');&nbsp; &nbsp; element.find('.owl-item.medium').removeClass('medium');&nbsp; &nbsp; element.find('.owl-item').eq(idx).addClass('big');&nbsp; &nbsp; element.find('.owl-item').eq(idx + 1).addClass('medium');&nbsp; &nbsp; element.find('.owl-item').eq(idx + 2).addClass('medium');&nbsp; },&nbsp; navContainer: '#nav',});或者您可以使用该事件：&nbsp;$('#MySlider .owl-carousel').on('initialized.owl.carousel', function(event) {&nbsp; &nbsp; let element = jQuery(event.target);&nbsp; &nbsp; let idx = event.item.index;&nbsp; &nbsp; element.find('.owl-item.big').removeClass('big');&nbsp; &nbsp; element.find('.owl-item.medium').removeClass('medium');&nbsp; &nbsp; element.find('.owl-item').eq(idx).addClass('big');&nbsp; &nbsp; element.find('.owl-item').eq(idx + 1).addClass('medium');&nbsp; &nbsp; element.find('.owl-item').eq(idx + 2).addClass('medium');&nbsp; });