jquery - Owl Carousel 使用单个 jQuery 脚本进行 2 个或更多部分

Question

谁能知道如何修改我的 jQuery 脚本以在不同的页面部分有 3 个项目和 4 个项目？在服务部分的理论，我有 4 个项目，在博客部分我有 3 个项目。

现在，如果我使用这个脚本，我的博客部分有 4 个项目，这些项目被扭曲了。我可以使用带有子选择器的变体吗？如何专业编码？

$('.owl-carousel').owlCarousel({
    loop:true,
    responsiveClass:true,
    dots:true,
    responsive:{
        0:{
            items:1,
            nav: true,
            dots:true
        },
        600:{
            items:2,
            nav:true,
            dots:true
        },
        1000:{
            items:4,
            nav: true,
            loop:false,
            dots:true
        }
    }
});

标签： jquerycarouselowl-carousel

Answer 1

我不得不这样做。将类 owl-3 或 owl-4 添加到相应的轮播中，并使用此代码进行初始化。

/* Set up owl-3 and owl-4 */
jQuery(document).ready(function(){
  if (jQuery('.owl-4').length) {
  // https://owlcarousel2.github.io/OwlCarousel2/docs
  jQuery('.owl-4').owlCarousel({
    loop:true,
    margin:30,
    nav:true,
    navText:["",""],
    dots:false,
    responsive:{
      0:{
        items:1
      },
      576:{
        items:2
      },
      768:{
        items:3
      },
      1000:{
        items:4
      }
    }
  });
}
if (jQuery('.owl-3').length) {
  jQuery('.owl-3').owlCarousel({
    loop:true,
    margin:30,
    nav:true,
    navText : ["",""],
    dots:false,
    responsive:{
      0:{
        items:1
      },
      576:{
        items:2
      },
      992:{
        items:3
      }
    }
  });    
 }
}