Mutlple猫头鹰旋转木马在一个页面与不同的设置

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.

有两个owlCarousel在一个页面中完美地工作但我想更改每个轮播上的默认设置。一旦我改变了适用于两个旋转木马的效果。

What I've already tried

我已经尝试过的

<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

我想更改每个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
}

3 个解决方案

#1

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

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

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

});

#2

there are tow things you must do to let every owl slider have its own trigger
1- each one have it's own assignment like above

有两件事你必须做，让每个猫头鹰滑块有自己的触发器1-每个人都有自己的任务，如上所述

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

});

2- change the button class name
1st slider

2-更改按钮类名称第1个滑块

<div class="customNavigation">
                    <a class="btn prev_one"><i class="fa fa-backward" aria-hidden="true"></i></a>
                    <a class="btn next_one"><i class="fa fa-forward" aria-hidden="true"></i></a>
                    <a class="btn play_one"><i class="fa fa-play" aria-hidden="true"></i></a>
                    <a class="btn stop_one"><i class="fa fa-pause" aria-hidden="true"></i></a>
                </div>

2nd Slider

第二滑块

<div class="customNavigation">
                    <a class="btn prev_two"><i class="fa fa-backward" aria-hidden="true"></i></a>
                    <a class="btn next_two"><i class="fa fa-forward" aria-hidden="true"></i></a>
                    <a class="btn play_two"><i class="fa fa-play" aria-hidden="true"></i></a>
                    <a class="btn stop_two"><i class="fa fa-pause" aria-hidden="true"></i></a>
                </div>

I wish it could be fine for you all

我希望你们大家都可以

#3

To change the class of the nav or dots you can use the class options provided by Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html)

要更改导航或点的类，您可以使用Owl Carousel提供的类选项（https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html）

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

  one.owlCarousel({
      navContainerClass: '//YOUR CUSTOM CLASS',
      dotsClass: '//YOUR CUSTOM CLASS'
  });  

  two.owlCarousel({
    navContainerClass: '//YOUR CUSTOM CLASS',
    dotsClass: '//YOUR CUSTOM CLASS'
  });

});

#1