1. 먼저 swiper 운영 환경을 만들어주세요. swiper.min.js, swiper.min.css 파일이 필요합니다.
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css?1.1.10"> </head> <body> ... </body>
<script src="path/to/swiper.min.js?1.1.10"></script>
</html>
2. HTML 콘텐츠를 작성합니다.
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> </div>
3. Swiper의 크기를 정의하고 싶을 수도 있지만 물론 그렇지 않습니다.
.swiper-container {
width: 600px;
height: 300px;
}4. Swiper 초기화:
<script>
var swiper=new Swiper('.swiper-container',{
autoplay:1000, // 자동 캐러셀
autoplayDisableOnInteraction:false,//슬라이딩 후 계속 스크롤
loop:true,///Loop
pagination:'.swiper-pagination',////Pagination
paginationClick 가능:true,////작은 점 click
spaceBetween: 30 ,//사진 간격
방향: "가로"//기본 가로 세로
})
</script> </body>
위 내용은 스와이프 플러그인 소개 및 이미지 캐러셀 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
