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

Posted 2023-02-16

【中文标题】使用 Owl Carousel 2.0 显示下一个和上一个项目的一部分

【英文标题】：Show part of next and previous items with Owl Carousel 2.0

【发布时间】：2014-10-07 21:24:07

【问题描述】：

我正在使用Owl Carousel 2.0。我想显示一个项目，前一个项目（左侧）的一半（或更少）和下一个项目（右侧）的一半（或更少）。只需将它们的一部分放在右侧和左侧即可：

我一直在尝试只使用 CSS（padding 和 margin 否定与 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>

【问题讨论】：

您可以发布您的代码/网站的链接吗？

当然！我做了一个代码笔：codepen.io/Big-beef/pen/FcECq 请记住，我要做的是在轮播中间显示一个项目，在左侧显示前一个元素的一部分，在右侧显示下一个项目的一部分边。以下是我想做的简要说明：big-beef.com/test/test.jpg 谢谢 Konstantin！

与此类似的东西：coolcarousels.frebsite.nl/c/2

看我的回答！对于链接的演示，您必须多次单击Run with JS，因为使用了rawgit.com，有时不会立即提供一些资源。

【参考方案1】：

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

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

【讨论】：

有没有办法只在一侧使用stagePadding 或类似的东西而不是两侧？我想只在右边显示下一个元素的一部分，而不在左边显示前一个

如果您只需要一侧，请将margin-left 添加到您的样式中的.owl-stage（与舞台填充相同，但为负数）。只有一侧会被填充。

stagePadding 只能在移动端显示吗？ @Coder

@athi 你应该可以在 resolutions 对象中做到这一点。

【参考方案2】：

此外，如果您只想从右侧获得下一项的一部分，请使用 @witrin 提到的：

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

并按照您的风格编写 css：

.owl-stage
    left:-30

有一个好的代码。

【讨论】：

正是我想要的！谢谢！

【参考方案3】：

我在上面的自定义代码中使用了半值。希望对您有所帮助。

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

【参考方案4】：

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

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

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