项目中遇到一个走马灯效果,修改了一席swiper 插件,需要修改下样式,配合swiper api,我用的的6.x版本
<div class="market-cells" id="hot">
<div class="swiper-container swiper-hot">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="market-cell">
<div class="market-logo"><img src="images/BTC@2x.png" ></div>
<div class="market-title">
<span>BTC</span><span class="sm">/USDT</span>
</div>
<div class="market-value">37751.29</div>
<div class="market-button">+1.66%</div>
</div>
</div>
<div class="swiper-slide">
<div class="market-cell">
<div class="market-logo"><img src="images/USDT@2x.png" ></div>
<div class="market-title">
<span>BTC</span><span class="sm">/USDT</span>
</div>
<div class="market-value">37751.29</div>
<div class="market-button">+1.66%</div>
</div>
</div>
<div class="swiper-slide">
<div class="market-cell">
<div class="market-logo"><img src="images/ETH@2x.png" ></div>
<div class="market-title">
<span>BTC</span><span class="sm">/USDT</span>
</div>
<div class="market-value">37751.29</div>
<div class="market-button">+1.66%</div>
</div>
</div>
<div class="swiper-slide">
<div class="market-cell">
<div class="market-logo"><img src="images/doge.png" ></div>
<div class="market-title">
<span>BTC</span><span class="sm">/USDT</span>
</div>
<div class="market-value">37751.29</div>
<div class="market-button">+1.66%</div>
</div>
</div>
</div>
</div>
</div>
重点修改css,动画效果
.swiper-hot .swiper-wrapper{
transition-timing-function:linear!important;
}
js api配置如下
<script type="text/javascript">
var hotswiper = new Swiper(".swiper-hot", {
loop:true,
speed:8800,//设置过度时间
autoplay: {
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: true,
},
});
</script>