Show part of next and previous items with Owl Carousel 2.0
46,244
Solution 1
The easiest way to do this is by using stagePadding
. Demo below:
$(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>
Solution 2
Also if you want to have part of next item only from right side, use as @witrin mentioned:
$('.owl-carousel').owlCarousel({
margin: 10,
loop: true,
items: 1,
stagePadding: 30
});
and also in your style write the css:
.owl-stage{
left:-30
}
Have a good code.
Solution 3
I used half values in the custom code like the above. Hope it helps.
$("#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,
});
Author by
Big-beef
Updated on February 10, 2020Comments
-
Big-beef about 4 years
I'm using Owl Carousel 2.0. I would like to show one item, a half (or less) of the previous item (left side) and a half (or less) of the next item (right side). Just putting a part of them out on the right and on the left side:
I've been trying using just CSS (
padding
andmargin
negative with theowl-stage-outer
) but obviously Javascript override them.Here's my code so far:
$('.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>
-
steps almost 9 yearsIs there a way to use
stagePadding
or anything similar for only one side instead of both? I would like to only display a part of the next element in the right, without displaying the previous one in the left -
rossanmol almost 7 yearsIn case you need just one side, add
margin-left
to.owl-stage
in your styling (same amount as stage padding, but negative). Only one side will be padded. -
athi about 6 yearsCan stagePadding be shown only in mobile view? @Coder
-
rossanmol about 6 years@athi you should be able to do that within the resolutions object.
-
MVDeveloper1 almost 4 yearsExactly want I wanted! Thanks!