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

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

Owl Carousel使用单个jQuery脚本编写2个或更多部分

1 个答案: