以Bootstrap为中心的旋转木马

时间:2016-09-12 15:19:40

标签: jquery twitter-bootstrap slider carousel owl-carousel

我想使用bootstrap carousel构建一个带有屏幕外项目的居中滑块。就像这个例子(页面上的第二个):http://owlcarousel.owlgraphic.com/demos/center.html

示例的问题是,项目未与引导网格对齐。是否有可能基于靴子转盘和网格构建它?

2 个答案:

答案 0 :(得分:1)

只需将整个轮播放入带有div的容器,并带有负侧边距:

<div class="container">
  <div style="margin-left: -45px; margin-right: -45px">
    <div class="loop owl-carousel owl-theme owl-center owl-loaded">
       ...
    </div>
  </div>
</div>

您只需为该负边距选择合适的值

答案 1 :(得分:0)

我找到了解决方案。您可以根据断点给div“.item”指定容器的最小宽度。

对于大屏幕,您可以执行以下操作:

.item {min-width: 1140px}