如何在旋转滑块中添加空间，只显示3个图像

Question

多亏了下面的帖子，我才能够在我的shopify商店中添加owl carousel滑块。

猫头鹰旋转木马，导航中心

我遵循codependency内的代码，并设法显示5个图像，并根据需要在一侧进行导航。我使用的CSS代码如下:

http://codepen。io/不久/钢笔/jJAHL

/**猫头鹰旋转木马猫头鹰演示主题* v1.23*/

.owl-theme .owl-controls{
    margin-top: 10px;
    text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin: 5px;
    padding: 3px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
/* preloading images */
.owl-item.loading{
    min-height: 150px;
    background: url(AjaxLoader.gif) no-repeat center center
}
#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}
#owl-demo .owl-item > div{
  background : #42bdc2;
  text-align: center;
  padding:50px 0px;
  margin:3px;
  color: white;
  font-size:32px;
  border:1px white;
}
.wrapper-with-margin{
  margin:0px 50px;
}

.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -45px;
  top: 55px; 
}
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: -45px;
  top: 55px;
}
.one {
  height: 200px;
}

我想做的唯一改变是只显示3张图像，但我不确定代码的哪一部分要改变，因为我不希望它影响图像的大小，因为当我试图添加一个右填充#owl-demo .owl-item>div它减少了盒子的大小。

如果有人能告诉我的话，我将非常感激。

Thanks in advance

Answer 1

最好的方法是使用owlCarousel中的响应选项，然后您可以设置断点和将显示的图像数量。查看这里的文档:http://www.owlcarousel.owlgraphic.com/demos/responsive.html

<>之前$ (' .owl-carousel ') .owlCarousel ({循环:没错,保证金:10,responsiveClass:没错,响应:{0: {项目:1、导航:真}，600: {项目:3,导航:假}，1000: {项目:3,导航:没错,循环:假}}})