렌더링
페이드 인/아웃으로 제품 사진을 자동으로 회전하고, 하단의 호출기를 클릭하면 사진이 전환됩니다.
1. 스위퍼 플러그인 다운로드 주소 https://3.swiper.com.cn/download/index.html
2. 플러그인을 로드하기 위해 필요한 파일은 swiper.min.js , swiper.min.css 파일입니다.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>페이지가 jQuery.js 또는 zepto.js를 로드하는 경우 더 가벼운 swiper.jquery.min.js를 사용하도록 선택할 수 있습니다 .
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>3. HTML 콘텐츠
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 轮播产品图 -->
<p class="swiper-slide product-img"><img src="/wp-content/uploads/2021/07/5gcpe-front-view.png" alt="产品正视图" /></p>
<p class="swiper-slide product-img"><img src="/wp-content/uploads/2021/07/5gcpe-side-view.png" alt="产品侧视图" /></p>
<p class="swiper-slide product-img"><img src="/wp-content/uploads/2021/07/5gcpe-dorsal-view.png" alt="产品后视图" /></p>
</div>
<!-- 显示分页器 -->
<div class="swiper-pagination"></div>
</div>4. CSS 콘텐츠
.swiper-container{
width: 448px;
align-self: flex-end;
}
.swiper-pagination-bullet {
width: 52px;
height: 6px;
display: inline-block;
border-radius: 3px;
background: #bbb;
}
.swiper-pagination-bullet-active {
background: #888;
}5. JS 콘텐츠
<script>
$(document).ready(function(){
var swiper = new Swiper('.swiper-container', {
effect : 'fade',
fade: {
crossFade: true,
},
autoplay:2000,
paginationClickable :true,
pagination: '.swiper-pagination',
autoplayDisableOnInteraction : false
});
})
</script>6. Swiper 플러그인 API 문서 https://3.swiper.com.cn/api/index.html
자신의 필요에 따라 다양한 옵션과 매개변수를 추가하여 Swiper를 풍부하게 할 수 있습니다~