Show part of next and previous items with Owl Carousel 2.0

Question

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:

enter image description here

I've been trying using just CSS (padding and margin negative with the owl-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>

Sure! I have done a codepen: http://codepen.io/Big-beef/pen/FcECq Keep in mind that what i'm trying to do is show one item in the middle of the carousel and a part of the previous element in the left and a part of the next item in the right side. Here is a brief what I want to do: http://big-beef.com/test/test.jpg Thanks Konstantin! — Big-beef, Aug 15 '14 at 15:49
Somethig similar to this: http://coolcarousels.frebsite.nl/c/2/ — Big-beef, Aug 15 '14 at 16:06
See my answer! For the linked demo you have to click `Run with JS` multiple times because `rawgit.com` is used which sometimes doesn't deliver some resources instantly. — witrin, Aug 17 '14 at 19:29

score 61 · Accepted Answer · edited Oct 06 '17 at 17:07

61

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>

edited Oct 06 '17 at 17:07

showdev

28,454
37
55
73

answered Aug 17 '14 at 11:12

witrin

3,701
1
24
49

6

Is 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 – steps Jun 04 '15 at 17:59
3

In 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. – rossanmol Jun 14 '17 at 21:52
1

Can stagePadding be shown only in mobile view? @Coder – athi Feb 16 '18 at 09:54
@athi you should be able to do that within the resolutions object. – rossanmol Feb 16 '18 at 12:23

score 9 · Answer 2 · answered Feb 10 '20 at 08:09

9

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.

answered Feb 10 '20 at 08:09

Have a Good Code

409
7
16

Exactly want I wanted! Thanks! – MVDeveloper1 Jun 01 '20 at 00:45

score 4 · Answer 3 · edited Oct 06 '17 at 16:51

4

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,
});

edited Oct 06 '17 at 16:51

showdev

28,454
37
55
73

answered Nov 25 '16 at 10:27

Leonardo Assis

41
1

score 0 · Answer 4 · answered Nov 11 '19 at 08:11

My code work well, the easiest way

 <style>
    /***** you should change (75px) for your own *****/
    #pro-slider{width: calc(100% - 75px);}
    #pro-slider .owl-stage-outer{overflow:unset;}
    </style>

    <script>
    jQuery(document).ready(function(){
    $('#pro-slider').owlCarousel({
    //items: depend on u
            items:1,
        });
    }
    </script>

Show part of next and previous items with Owl Carousel 2.0

4 Answers4

Linked

Related