包含视频和图片切换并自动轮播方法代码swiper3
1、把swiper.min.css和swiper.jquery.min.js这个两个文件夹分别放在css和js文件夹并在首页html代码中引入,同时还需要引入:1.12.4版本的jquery.min.js
2、html代码将会在下边显示。
3、CSS代码:
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
max-width: 1200px;
width: 94%;
margin: 40px auto;
}
.banner_index .swiper-slide {
position: relative;
}
.banner_index .swiper-slide img {
width: 100%;
}
.banner_index .swiper-slide video {
position: absolute;
width: 100%;
left: 0px;
top: 50%;
transform: translateY(-50%);
object-fit: cover;
}
</style>
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。