web-dev-qa-db-fra.com

Diapositive 2 éléments du carrousel OWL

J'utilise un OWL Carousel pour mon curseur.

Ce que j'essaie de faire, c'est de glisser les éléments 2 lorsque vous cliquez sur Suivant.

Donc, son glissement à chaque deuxième élément montrant toujours le deuxième élément pendant la transmission.

J'ai essayé de travailler avec CSS mais sans succès.

Voici ma configuration de base

$("#owl-demo").owlCarousel({

  navigation : true, // Show next and prev buttons
  slideSpeed : 600,
  paginationSpeed : 400,
  singleItem:true,

  // "singleItem:true" is a shortcut for:
  // items : 2 
  // itemsDesktop : false,
  // itemsDesktopSmall : false,
  // itemsTablet: false,
  // itemsMobile : false

});

Toute aide très appréciée.

Merci d'avance.

javascriptjquerycsscarouselowl-carousel
10
Dom

Dans la version actuelle de Owl Carousel (1.3.2), recherchez le fichier "owl.carousel.js" et faites défiler jusqu'à la ligne 558. La ligne se lira:

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;

Changez le dernier chiffre en "2" pour qu'il se lise: 

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

Enregistrez le fichier, ce qui devrait déplacer le curseur de deux éléments. 

3
NinoLopezWeb

Ne changez pas le code du plugin, vous avez juste besoin d'initialiser le carrousel avec l'option slide comme indiqué ci-dessous.

//Initialize Plugin
$(".owl-carousel").owlCarousel(
  {
    slideBy: 4
  }
);
26
Risheekesh Yadav
scrollPerPage : true

Cela peut aider

15
Andrii Motsyk
jQuery(".view-id-frontpage .view-content").owlCarousel( {
  items: 2,
  itemsDesktop : [1000,2], // 2 items between 1000px and 901px
  itemsDesktopSmall : [900,2], // betweem 900px and 601px
  itemsTablet: [700,1], // 2 items between 600 and 480
  itemsMobile : [479,1] , // 1 item between 479 and 0
  navigation: true,
  lazyLoad: true,
  pagination: false,
  scrollPerPage : true
});

Cela m'a aidé.

7
Valentina
Slide 2 items in OWL Carousel

Check this Example

http://jsfiddle.net/k0nn7yw5/107/

2
Rizwan Akram

Les réponses ci-dessus sont utiles mais incomplètes. 

Remplacer la ligne 558 dans owl.carousel.js :

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

Remplacez la ligne 559 dans owl.carousel.js par:

if (base.currentItem > base.maximumItem + (base.options.scrollPerPage === true ? (base.options.items - 1) : 0)) {

Cela fera défiler le carrousel de 2 lorsque vous cliquerez sur Suivant, mais vous devrez toujours indiquer le moment où un utilisateur cliquera sur le bouton prev. Ce qui suit fera exactement cela 

Remplacez la ligne 581 dans owl.carousel.js par:

base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;

Vous devez maintenant comptabiliser un nombre impair d'éléments dans votre carrousel afin que celui-ci puisse cliquer d'un bout à l'autre de chaque élément.

Ajoutez ce code à la ligne 582 directement sous le code de l'étape précédente:

if (base.currentItem === -1) base.currentItem = 0;

J'espère que cette aide.

2
Ben Callis

Vous pouvez facilement ajouter 

slideBy: 2

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

1
chamiakora

Pour le bouton Suivant,

//base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;
To
base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

Pour le bouton précédent,

//base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 1;
To
base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;
0
Kiran