swiper는 PC를 지원할 뿐만 아니라 모바일 장치용으로 설계된 경량 회전판 이미지 플러그인으로 이를 사용하여 회전판 이미지를 빠르게 만들거나 확장하여 복잡한 회전판 효과를 만들 수 있습니다.
swiper를 사용하려면 두 개의 파일이 필요합니다. 하나는 swiper.css입니다. 이 파일은 이 슬라이딩 캐러셀 플러그인에서 일반적으로 사용되는 일부 스타일을 지정합니다. 물론 원하는 경우 자신만의 스타일을 정의할 수 있습니다.
다른 하나는 swiper입니다. .js 플러그인의 주요 부분입니다.
이 두 파일을 페이지에 도입한 후 먼저 기본 HTML 구조를 작성해야 합니다.
다음 사용 방법은 모두 swiper 4를 기반으로 합니다. , 창, swiper-wrapper는 모든 캐러셀 이미지를 특정 순서로 배열한 모음입니다. 기본적으로는 왼쪽과 오른쪽으로 배열되어 있습니다. 마우스나 터치스크린을 조작하면 요소의 위치가 변경되고, 방송 효과가 나타납니다. swiper-slide는 각 캐러셀 요소입니다. 기본 HTML 구조를 작성한 후 캐러셀을 초기화해야 합니다
<p class="swiper-container"> <p class="swiper-wrapper"> <p class="swiper-slide">Slide 1</p> <p class="swiper-slide">Slide 2</p> <p class="swiper-slide">Slide 3</p> <p class="swiper-slide">Slide 4</p> <p class="swiper-slide">Slide 5</p> <p class="swiper-slide">Slide 6</p> <p class="swiper-slide">Slide 7</p> <p class="swiper-slide">Slide 8</p> <p class="swiper-slide">Slide 9</p> <p class="swiper-slide">Slide 10</p> </p> </p>
이렇게 하면 마우스나 터치 스크린을 사용하여 왼쪽 및 오른쪽으로 이동할 수 있는 기본 캐러셀이 생성됩니다. Sliding
Add 페이징 및 탐색
<script> var swiper = new Swiper('.swiper-container');</script>
여기에는 swiper-button-next와 swiper-button-prev가 모두 포함되어 있습니다. 버튼은 수직 중앙에 오른쪽에 배치되고 이전 버튼은 수직 중앙에 오른쪽에 배치됩니다. 물론 버튼을 직접 지정할 수도 있습니다.
<p class="swiper-container"> <p class="swiper-wrapper">...</p> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p>
이런 방식으로 탐색 버튼이 있는 캐러셀을 생성할 수 있습니다
페이징을 추가하는 방법은 탐색 버튼과 매우 유사합니다html:
var swiper = new Swiper('.swiper-container',{ navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } });
<p class="swiper-container"> <p class="swiper-wrapper"> ... </p> <!-- 分页 --> <p class="swiper-pagination"></p> <!--导航按钮--> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p>
이것 방법 페이지 매김 및 탐색 기능을 사용하여 회전식 차트를 생성할 수 있습니다
루프 및 자동 회전식 슬라이드:
var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } });
다른 공통 속성을 추가하세요
var swiper = new Swiper('.swiper-container', { //分页 pagination: { el: '.swiper-pagination', }, //导航按钮 navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, //自动轮播 autoplay: { delay: 2500,//时间 毫秒 disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true }, });
간단한 PHP+MySQL 페이징 클래스
HTML을 Excel로 변환하고 인쇄 및 다운로드 기능을 실현
위 내용은 스와이프의 기본 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!