再做美化的时候想加一个文章轮播样式进去,时间比较仓促,简单优化了一下,话不多说上代码
html部分
<div id="owl-demo" class="owl-carousel">
<div class="itemm"><img src="填写图片地址" alt="Owl Image"></div>
<div class="itemm"><img src="填写图片地址" alt="Owl Image"></div>
<div class="itemm"><img src="填写图片地址" alt="Owl Image"></div>
<div class="itemm"><img src="填写图片地址" alt="Owl Image"></div>
<div class="itemm"><img src="填写图片地址" alt="Owl Image"></div>
<div class="itemm"><img src="填写图片地址" alt="Owl Image"></div>
</div>
css部分
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel {
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y
}
.owl-carousel .owl-wrapper {
display: none;
position: relative;
-webkit-transform: translate3d(0px,0px,0px)
}
.owl-carousel .owl-wrapper-outer {
overflow: hidden;
position: relative;
width: 100%
}
.owl-carousel .owl-wrapper-outer.autoHeight {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out
}
.owl-carousel .owl-item {
float: left
}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0)
}
#owl-demo .itemm{
margin: 10px;
height: 400px;
}
#owl-demo .itemm img{
display: block;
width: 100%;
height: 100%;
border-radius: 12px;
}
#owl-demo{
position: relative;
margin: 0 auto;
max-width: 1200px;
}
js部分
需要下载,没有时间去整理,直接放下载地址
此内容 评论 本文后刷新页面可见!
样式
原文链接:https://www.baijiascw.com/25556.html,转载请注明出处。
评论0