Множество бухали Въртележка на една страница с различни настройки

Има два 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
}

javascript slider html jquery owl-carousel
person Nasir Javed    schedule 17.09.2014    source източник
comment
Моля, прочетете внимателно описанията на етикетите; този въпрос не е за бухал, чието описание е Езикът за уеб онтология (OWL) е речник за създаване на схеми (онтологии) , т.е. дефиниции на класове, свойства и връзките между тях. Трябваше да използвате маркера owl-carousel.   -  person Joshua Taylor    schedule 17.09.2014

Отговори (4)


arrow_upward
5
arrow_downward

Ако присвоите променлива на всеки от 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,
  });

});
person Chris Sawyer    schedule 17.09.2014

arrow_upward
1
arrow_downward

има няколко неща, които трябва да направите, за да позволите на всеки плъзгач на бухал да има свой собствен тригер
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- променете името на класа на бутона
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>

Втори плъзгач

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

Иска ми се да е добре за всички вас

person Karim A.Fattah    schedule 17.09.2016

arrow_upward
0
arrow_downward

js код

    $("#fr-car").owlCarousel({
    items: 1,
    loop: false,
    autoplay: true,
    animateOut: 'fadeOut',
    autoplayTimeout: 3000,
    nav: true,
    autoplayHoverPause: true
  });
  $('#nd-car').owlCarousel({
    responsive:{
      0:{
          items:1,
          nav:true
      },
      600:{
          items:3,
          nav:false
      },
      1000:{
          items:5,
          nav:true,
          loop:false
      }
  }
  })

HTML код

<div id="fr-car" class="owl-carousel">
  <div></div>
  <div></div>
  <div></div>
</div


<div id="nd-car" class="owl-carousel" >
  <div></div>
  <div></div>
  <div></div>
</div
person Mohamad Hendy    schedule 21.06.2020
comment
Когато добавяте отговор към почти шестгодишен въпрос, е важно да посочите в обяснението не само как и защо работи, но и какви предимства предлага този код пред трите съществуващи отговора. - person Jason Aller; 21.06.2020

arrow_upward
-1
arrow_downward

За да промените класа на навигацията или точките, можете да използвате опциите за клас, предоставени от 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'
  });

});

person dbock    schedule 05.06.2018