스와이프의 기본 사용법

스와이퍼란 무엇인가요?

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 페이징 및 탐색

대부분의 캐러셀에는 사용자가 현재 위치를 확인하고 이것이 대화형 부분임을 사용자에게 알릴 수 있는 페이징 및 탐색 기능이 있습니다. 페이징을 추가하는 방법도 매우 간단합니다. 초기화 중에 페이징 요소를 지정합니다. html 부분에서 swiper-container 아래에 다음 및 이전 버튼을 추가합니다.

<script>
    var swiper = new Swiper(&#39;.swiper-container&#39;);</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',
        }
    });

초기화 중에 페이징 요소 추가
js:

  <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>

이것 방법 페이지 매김 및 탐색 기능을 사용하여 회전식 차트를 생성할 수 있습니다

루프 및 자동 회전식 슬라이드:

js:

초기화 중에

    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation:{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });

다른 공통 속성을 추가하세요

페이지 매김이 진행률 표시줄로 대체됩니다

1.    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 
          },
      });

   이 글에서는 swiper의 기본적인 사용법을 설명합니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

관련 권장사항:

간단한 PHP+MySQL 페이징 클래스

재귀가 없는 두 개의 트리 배열 생성자

HTML을 Excel로 변환하고 인쇄 및 다운로드 기능을 실현

위 내용은 스와이프의 기본 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!