多个猫头鹰轮播在一页不同的设置

Mutlple owl Carousel in one page with different setting(多个猫头鹰轮播在一页不同的设置)

问题描述

有两个 owlCarousel 在一个页面中完美运行，但我想更改每个轮播的默认设置.一旦我更改了适用于两个轮播的效果.

There are two owlCarousel working perfectly in one page but I want to change the default setting on each carousel. Once I changed the effects applying to both carousel.

我已经尝试过的

<script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel1({
        navigation : false,
        pagination : true,
        items : 1
      });
    });

</script>
<script>
    $(document).ready(function() {

    $("#owl-example").owlCarousel();


    });
</script>

我想为每个轮播更改以下设置

I want to change the below settings for each carousle

 $.fn.owlCarousel.options = {

        items : 4,
        itemsCustom : false,
        itemsDesktop : [1199, 1],
        itemsDesktopSmall : [979, 1],
        itemsTablet : [768, 1],
        itemsTabletSmall : false,
        itemsMobile : [479, 1],
        singleItem : false,
        itemsScaleUp : false
}

推荐答案

如果您为每个要定位的 div 分配一个变量，然后分配选项，示例如下；

If you assign a variable to each of the div's you wish to target and then assign the options, example below;

$(document).ready(function() {
   var one = $("#one");
   var two = $("#two");

  one.owlCarousel({
      navigation : false, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
      mouseDrag:false,
      touchDrag:false
  });  

two.owlCarousel({
  navigation : true, // Show next and prev buttons
  slideSpeed : 300,
  paginationSpeed : 400,
  singleItem:true,
  mouseDrag:false,
  touchDrag:false,
  navigationText : false,
  rewindSpeed : 300,
  });

});

这篇关于多个猫头鹰轮播在一页不同的设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！