虎牙轮播swiper实现
2019-03-01 本文已影响0人
书简_yu
虎牙
mydemo
code
// js
var mySwiper = new Swiper('.swiper-container', {
slideActiveClass: 'swiper-slide-active',
centeredSlides: true,
slidesPerView: 'auto',
loop: true,
loopedSlides: 5,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
// css
.swiper-container {
margin-top: 20px;
width: 1200px;
height: 300px;
}
.swiper-slide{
margin-top: 50px;
width: 400px!important;
height: 200px;
position: relative;
}
.swiper-slide div{
width: 100%;
height: 100%;
}
.swiper-slide-active{
margin-top: 0;
height: 300px;
}
.swiper-slide-active div{
position: absolute;
width: 600px;
height: 100%;
z-index: 9;
left: -100px;
}
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yyx</title>
<link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.swiper-container {
margin-top: 50px;
width: 600px;
height: 100px;
border: 1px solid orangered;
}
.swiper-slide {
margin-top: 10px;
height: 80px;
background: beige;
width: 200px !important;
}
.swiper-slide-active {
width: 100px !important;
background: #fff !important;
position: relative;
z-index: 9;
}
.swiper-slide-active:after {
content: ' ';
display: block;
position: absolute;
background: aquamarine;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
transform: scaleX(3) scaleY(1.5);
transform-origin: center;
}
.my-slide-next {
width: 250px !important;
}
.my-slide-prev {
width: 250px !important;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide" style="background: orchid;">Slide 2</div>
<div class="swiper-slide" style="background: orangered;">Slide 3</div>
</div>
</div>
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,
loop: true, // 循环模式选项
slidesPerView: 3,
centeredSlides: true,
slideActiveClass: 'swiper-slide-active',
slideNextClass: 'my-slide-next',
slidePrevClass: 'my-slide-prev',
})
</script>
</body>
</html>
two
