swiper 6.x 走马灯效果,js走马灯缩略图

项目中遇到一个走马灯效果,修改了一席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>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注