4

1 つのページで 2 つの owlCarousel が完全に機能していますが、各カルーセルのデフォルト設定を変更したいと考えています。両方のカルーセルに適用される効果を変更したら。

私がすでに試したこと

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

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

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


    });
</script>

カルーセルごとに以下の設定を変更したい

 $.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
}
4

4 に答える 4

1

すべてのフクロウのスライダーに独自のトリガーを持たせるには、
2 つのことを行う必要があります。

    $(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- ボタンのクラス名を変更する
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>

2 番目のスライダー

<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>

皆様にとって良いものでありますように

于 2016-09-17T13:33:15.630 に答える