wordpress新增功能文章、图片轮播

wordpress新增功能文章、图片轮播

再做美化的时候想加一个文章轮播样式进去,时间比较仓促,简单优化了一下,话不多说上代码 html部分 <div id="owl-demo" class="owl-carousel"> <div class="itemm"><img src="填写图片地址" alt="Owl Image"></div> <div class="itemm"><...

再做美化的时候想加一个文章轮播样式进去,时间比较仓促,简单优化了一下,话不多说上代码

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

评论0

站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除! 心愿单
没有账号? 注册  忘记密码?

社交账号快速登录