Swiper를 사용하여 페이지 이미지 캐러셀을 구현하는 방법
- 亚连원래의
- 2018-06-14 17:04:012196검색
이 글은 Swiper를 기반으로 한 모바일 페이지에서의 이미지 캐러셀 효과를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
Swiper를 사용하여 모바일 페이지를 개발하고 이미지 캐러셀을 쉽게 구현해보세요.
swiper
1. 주로 모듈을 포함합니다:
swiper: 슬라이딩 및 전환을 의미합니다(전체 슬라이딩 개체, 때로는 슬라이더가 맞을 때까지 계속 앞으로 이동하는 프로세스를 의미함). 해제된 후의 가장자리(전환) ))
컨테이너: 컨테이너를 의미합니다(스와이프의 컨테이너에는 슬라이드 모음(래퍼), 페이지 매기기, 앞으로 버튼 등이 포함됩니다.)
래퍼: (터치 개체, 터치 가능 개체)을 포함하는 컨테이너를 의미합니다. 영역, 모바일 전환 중에 슬라이드 스위치로 대체될 블록 모음)
slider: 슬라이더(텍스트, 그림, HTML 요소 또는 다른 스와이프를 포함할 수 있는 전환된 블록 중 하나)를 나타냅니다.
페이지 매김: 다음을 나타냅니다. 페이지네이터(슬라이드를 나타냄) 번호와 현재 활성화된 슬라이드)
활성: 활성화된(표시되는) 슬라이드를 나타냅니다. 보이는 슬라이드가 두 개 이상인 경우 기본적으로 가장 왼쪽의 슬라이드가 활성화됩니다.)
콜백: 콜백 함수를 참조합니다(특정 상황에서 트리거됨)
2. 아래와 같이 간단한 캐러셀 :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" >
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="swiper-3.2.7.min.js"></script>
</head>
<body>
<p class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式-->
<p class="swiper-wrapper">
<p class="swiper-slide"><img src="Walks-poster.png"></p>
<p class="swiper-slide"><img src="Walks-poster.png"></p>
<p class="swiper-slide"><img src="Walks-poster.png"></p>
</p>
<p class="swiper-pagination" style="width: 100px;float: right"></p><!--分页器-->、
<p class="swiper-button-prev"></p><!--前进按钮-->
<p class="swiper-button-next"></p><!--后退按钮-->
</p>
<script type="text/javascript">
var mySwiper = new Swiper(".swiper-container",{
direction:"horizontal",/*横向滑动*/
loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/
pagination:".swiper-pagination",/*分页器*/
prevButton:".swiper-button-prev",/*前进按钮*/
nextButton:".swiper-button-next",/*后退按钮*/
autoplay:3000/*每隔3秒自动播放*/
})
</script>
</body>
</html>3.js의 기타 매개변수:
var mySwiper = new Swiper(".swiper-container",{
effect:"coverflow",/*轮播的效果：（1）fade:淡入淡出；（2）cube:立方体；（3）coverflow:立体照片*/
slidesPerView:3,/*网格分布：1为在容器区域出现一张图；2：在容器区域出现两张图；3：在容器区域出现三张图*/
centeredSlides:true,/*默认第一块居左，设置为true后则是居中显示*/
coverflow:{
rotate:30,/*3d旋转角度设置为30度*/
stretch:10,/*每个slide之间的拉伸值，值越大靠得越近*/
depth:60,/*位置深度，值越大离Z轴越远，看起来越小*/
modifier:2,
slideshadows:true/*开启阴影*/
}
})참고: swiper를 사용하기 전에 swiper.css 및 swiper가 있어야 합니다.
관련 기사:
VuejQuery의 Dom 요소 정보 JavaScript 중재자 패턴(자세한 튜토리얼)위 내용은 Swiper를 사용하여 페이지 이미지 캐러셀을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!