使用Owl Carousel 2.0显示下一个和上一个项目的一部分

时间:2014-08-14 09:17:51

标签: jquery css carousel owl-carousel owl-carousel-2

我正在使用Owl Carousel 2.0。我想显示前一项(左侧)的一个项目,一半(或更少)以及下一项目(右侧)的一半(或更少)。只是把它们的一部分放在右边和左边:

enter image description here

我一直在尝试使用CSS(paddingmargin否定与owl-stage-outer),但显然Javascript会覆盖它们。

到目前为止,这是我的代码:

$('.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>

4 个答案:

答案 0 :(得分:34)

最简单的方法是使用stagePadding。演示如下:

&#13;
&#13;
$(function() {
  $('.owl-carousel').owlCarousel({
    margin: 10,
    loop: true,
    items: 1,
    stagePadding: 100
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我在自定义代码中使用了一半的值,如上所述。希望它有所帮助。

$("#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,
});

答案 2 :(得分:1)

如果只想从右侧获得下一个项目的一部分,请使用上述@witrin:

$('.owl-carousel').owlCarousel({
    margin: 10,
    loop: true,
    items: 1,
    stagePadding: 30
});

并按照您的风格编写css:

.owl-stage{
    left:-30
}

具有良好的代码。

答案 3 :(得分:0)

我的代码运行良好,最简单的方法

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