gpt4 book ai didi

html - 如何在旋转木马 slider 中添加空间并仅显示 3 张图像

转载 作者:行者123 更新时间:2023-11-28 16:07:31 25 4
gpt4 key购买 nike

感谢以下帖子,我能够将 Owl Carousel slider 添加到我的 shopify 商店中。

owl carousel, navigation center

我按照 codepen 中的代码成功显示了 5 张图像,并且还根据需要在侧面设置了导航。我使用的 CSS 代码如下:

http://codepen.io/anon/pen/jJAHL

/** Owl Carousel 猫头鹰演示主题* 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 添加右填充,它会减小框的大小。

如果有人可以提供建议,将不胜感激。

提前致谢

最佳答案

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

$('.owl-carousel').owlCarousel({    loop:true,    margin:10,    responsiveClass:true,    responsive:{        0:{            items:1,            nav:true        },        600:{            items:3,            nav:false        },        1000:{            items:3,            nav:true,            loop:false        }    }})

关于html - 如何在旋转木马 slider 中添加空间并仅显示 3 张图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38906714/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com