스와이프 플러그인 소개 및 이미지 캐러셀 방법
- PHP中文网원래의
- 2017-06-19 17:23:161705검색
swiper
Swiper는 순수 JavaScript로 제작된 슬라이딩 특수 효과 플러그인으로 휴대폰, 태블릿 및 기타 모바일 단말기를 지향합니다.
Swiper는 터치스크린 초점 이미지, 터치스크린 탭 전환, 터치스크린 다중 이미지 전환 등과 같은 일반적인 효과를 얻을 수 있습니다.
Swiper는 무료이며 안정적이고 사용이 간편하며 강력한 오픈 소스입니다. 모바일 터미널 웹사이트를 구축하는 데 중요한 선택입니다!
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>
3989f20b29ca3784489ad4a92ad594dd2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5e
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 초기화: 36cc49f0c466276486e50c850b7e4956 태그 옆에 있는 것이 가장 좋습니다(함수 호출)
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var swiper=new Swiper('.swiper-container',{
autoplay:1000, // 자동 캐러셀
autoplayDisableOnInteraction:false,//슬라이딩 후 계속 스크롤
loop:true,///Loop
pagination:'.swiper-pagination',////Pagination
paginationClick 가능:true,////작은 점 click
spaceBetween: 30 ,//사진 간격
방향: "가로"//기본 가로 세로
})
2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956
위 내용은 스와이프 플러그인 소개 및 이미지 캐러셀 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：ES6 문자열 확장의 빈번한 사용 요약다음 기사：ES6 문자열 확장의 빈번한 사용 요약