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

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

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，转载请注明出处。