Implement swiper to implement thumbnails

1. Effect

2. Code implementation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="asset/css/swiper.min.css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.page_cont img {
			width: 100%;
			display: block;
		}

		.thumbs img {
			opacity: .2;
		}

		.swiper-slide-thumb-active img {
			opacity: 1;
		}
	</style>
	<script src="asset/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="asset/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$.get("https://www.fastmock.site/mock/961b619357977ecee63001f0f5140734/yghh/imgRe", (res) => {

			let swiperList = "";

			for (let i = 0; i < res.length; i++) {
				swiperList += `<div class="swiper-slide"><img src="${res[i].img}" ></div>`
			}

			let gallery =
				`<div class="gallery swiper-container">
					<div class="swiper-wrapper">` +
				swiperList +
				`</div>
				</div>`;

			let thumbs =
				`<div class="thumbs swiper-container">
					<div class="swiper-wrapper">` +
				swiperList +
				`</div>
				</div>`;

			$(".page_cont").append(gallery, thumbs);
			var mySwiper = new Swiper('.gallery', {
				autoplay: true, //可选选项，自动滑动
				loop: true,
				thumbs: {
					swiper: {
						el: '.thumbs',
						slidesPerView: 4,
						// spaceBetween: 10,
						watchSlidesVisibility: true,
						loop: true
						/*避免出现bug*/
					},
				}
			})

		})
	</script>
</html>

Implement swiper to implement thumbnails

1. Effect

2. Code implementation

Reference: swiper official website thumbnail implementation

Guess you like