当前位置：网站首页>The last picture is seamlessly connected with the first picture in the swiper rotation picture

The last picture is seamlessly connected with the first picture in the swiper rotation picture

2022-07-01 15:12:00 【Skipping Wang Xiaozhe】

Problem description ：

Recently, with swiper Make advertising rotation pictures , Then I find that when I slide to the last picture , The picture in the middle will flash by , This will affect the beauty .

Problem solving ：

  increase   loop: true attribute ;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Rotation diagram of mobile terminal </title>
	<link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
	<div class="contenter">
		<div class="swiper-container">
            <div class="swiper-wrapper" loop="true">
                <div class="swiper-slide"><a href="#"><img width="100%" src="./images/banner.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img width="100%" src="./images/banner2.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img width="100%" src="./images/banner.jpg" alt=""></a></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
	</div>
	<script src="./js/swiper.min.js"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container', {
			loop: true,// The last one is seamlessly linked with the first one 
            autoplay:3000,// Optional options , Auto slide time 
            pagination: '.swiper-pagination',
            paginationClickable: true,
            
        })
	</script>
</body>
</html>
原网站

版权声明
本文为[Skipping Wang Xiaozhe]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/182/202207011509275247.html

边栏推荐

猜你喜欢

随机推荐