J'utilise Owl Carousel 2.0 . Je souhaite afficher un élément, une moitié (ou moins) de l'élément précédent (côté gauche) et une moitié (ou moins) de l'élément suivant (côté droit). Il suffit d’en mettre une partie à droite et à gauche:
J'ai essayé d'utiliser uniquement CSS (padding
et margin
negatif avec le owl-stage-outer
), mais évidemment JavaScript les remplacer.
Voici mon code jusqu'à présent:
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
}
}
})
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0em;
}
.owl-carousel .item {
height: 10em;
background: #4DC7A0;
padding: 1em;
}
.wrapper {
width: 40em;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="wrapper">
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
Le moyen le plus simple de procéder consiste à utiliser stagePadding
. Démo ci-dessous:
$(function() {
$('.owl-carousel').owlCarousel({
margin: 10,
loop: true,
items: 1,
stagePadding: 100
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item"><img src="//placehold.it/350x150&text=1" /></div>
<div class="item"><img src="//placehold.it/350x150&text=2" /></div>
<div class="item"><img src="//placehold.it/350x150&text=3" /></div>
<div class="item"><img src="//placehold.it/350x150&text=4" /></div>
<div class="item"><img src="//placehold.it/350x150&text=5" /></div>
<div class="item"><img src="//placehold.it/350x150&text=6" /></div>
<div class="item"><img src="//placehold.it/350x150&text=7" /></div>
<div class="item"><img src="//placehold.it/350x150&text=8" /></div>
</div>
J'ai utilisé des demi-valeurs dans le code personnalisé comme ci-dessus. J'espère que ça aide.
$("#owlCarousel").owlCarousel({
itemsCustom: [
[0, 1],
/* Show half of next item */
[450, 1.5],
[600, 2.5],
[700, 3],
[800, 3],
[1000, 4],
[1200, 4],
[1400, 4],
[1600, 4]
],
lazyLoad: true,
navigation: false,
});