Study笔记

swiper全屏响应式幻灯片代码

swiper全屏响应式幻灯片代码是一款基于swiper.js的手机触屏左右滑动图片切换,带缩略图和左右方向箭头的手机图片幻灯片轮播代码。

swiper全屏响应式幻灯片

部分代码展示:

<div class="gallery-top-box">
	<div class="swiper-container gallery-top">
		<div class="swiper-wrapper">
			<div class="swiper-slide" data-id="1"> <img src="images/a1.png"> </div>
			<div class="swiper-slide" data-id="2"> <img src="images/a2.png"> </div>
			<div class="swiper-slide" data-id="3"> <img src="images/a3.png"> </div>
			<div class="swiper-slide" data-id="4"> <img src="images/a4.png"> </div>
			<div class="swiper-slide" data-id="5"> <img src="images/a5.png"> </div>
			<div class="swiper-slide" data-id="6"> <img src="images/a6.png"> </div>
			<div class="swiper-slide" data-id="7"> <img src="images/a1.png"> </div>
			<div class="swiper-slide" data-id="8"> <img src="images/a2.png"> </div>
			<div class="swiper-slide" data-id="9"> <img src="images/a3.png"> </div>
			<div class="swiper-slide" data-id="10"> <img src="images/a4.png"> </div>
			<div class="swiper-slide" data-id="11"> <img src="images/a5.png"> </div>
			<div class="swiper-slide" data-id="12"> <img src="images/a6.png"> </div>
			<div class="swiper-slide" data-id="13"> <img src="images/a1.png" > </div>
			<div class="swiper-slide" data-id="14"> <img src="images/a2.png"> </div>
			<div class="swiper-slide" data-id="15"> <img src="images/a3.png"> </div>
			<div class="swiper-slide" data-id="16"> <img src="images/a4.png"> </div>
			<div class="swiper-slide" data-id="17"> <img src="images/a5.png"> </div>
			<div class="swiper-slide" data-id="18"> <img src="images/a6.png"> </div>
			<div class="swiper-slide" data-id="19"> <img src="images/a1.png" > </div>
			<div class="swiper-slide" data-id="20"> <img src="images/a2.png"> </div>
			<div class="swiper-slide" data-id="21"> <img src="images/a3.png"> </div>
			<div class="swiper-slide" data-id="22"> <img src="images/a4.png"> </div>
			<div class="swiper-slide" data-id="23"> <img src="images/a5.png"> </div>
			<div class="swiper-slide" data-id="24"> <img src="images/a6.png"> </div>
		</div>
		<div class="swiper-scrollbar"></div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

完整swiper全屏响应式幻灯片代码下载

链接:https://pan.baidu.com/s/1N3JV6B4MstIKDy_x5jhgXQ 提取码:r53c
相关文章

个人简介

说的再好不如做的漂亮

标签聚合