小编Big*_*eef的帖子

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

我正在使用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
    }
  }
})
Run Code Online (Sandbox Code Playgroud)
.owl-carousel .item h4 {
  color: #FFF;
  font-weight: 400;
  margin-top: 0em;
}

.owl-carousel .item {
  height: 10em;
  background: #4DC7A0;
  padding: 1em;
}

.wrapper {
  width: 40em;
}
Run Code Online (Sandbox Code Playgroud)
<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> …
Run Code Online (Sandbox Code Playgroud)

css jquery carousel owl-carousel owl-carousel-2

19
推荐指数
2
解决办法
3万
查看次数

标签 统计

carousel ×1

css ×1

jquery ×1

owl-carousel ×1

owl-carousel-2 ×1