스와이프 모바일 캐러셀 플러그인 사용 방법

이 글에서는 주로 스와이퍼 모바일 캐러셀 플러그인에 대해 자세히 소개합니다. 사진을 터치하면 캐러셀이 멈추는데, 이는 특정 참조 값을 가지고 있습니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

이 글의 예시는 모든 사람과 스와이퍼 모바일을 공유합니다. . 터미널 캐러셀 플러그인은 참고용입니다. 구체적인 내용은 다음과 같습니다

다음은 제가 겪었던 문제이며, 캐러셀이 필요하지 않은 경우에도 이 플러그인에서 일반적으로 사용되는 몇 가지 매개변수입니다. 복잡한 문제는 이 글을 읽어보시면 해결하실 수 있습니다. 더 알고 싶으시면 스와이퍼 플러그인 공식 주소를 참고하세요.

1단계swiper.min.js 소개

<script src="../style/js/swiper.min.js"></script>

2단계html

<p class="swiper-container">
  <p class="swiper-wrapper">
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner1.jpg">
    </p>
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner2.jpg">
    </p>
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner3.jpg">
    </p>
  </p>
  <p class="swiper-pagination"></p> <!--需要轮播序号的时候写-->
</p>

3단계Call(여기서 요점이 나옵니다)

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000
});

이 경우에는 사진이 자동으로 회전될 수 있지만, 손으로 터치하면 회전목마가 멈추기 때문에 다른 매개변수를 추가해야 합니다

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000,
    autoplayDisableOnInteraction : false  /* 注意此参数，默认为true */ 
});

어떻게 슬라이드해도 회전목마 이벤트가 다시 발생합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

jQuery에서 눈 애니메이션 효과를 얻는 방법

WeChat 애플릿에서 목록 풀다운 새로 고침 풀업 로딩 효과를 얻는 방법은 무엇입니까?

WeChat 미니 프로그램에서 디지털 스크롤 플러그인을 사용하는 방법

위 내용은 스와이프 모바일 캐러셀 플러그인 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!