이 글에서는 주로 스와이퍼 모바일 캐러셀 플러그인에 대해 자세히 소개합니다. 사진을 터치하면 캐러셀이 멈추는데, 이는 특정 참조 값을 가지고 있습니다. 관심 있는 친구들은 이를 참고할 수 있습니다.
이 글의 예시는 모든 사람과 스와이퍼 모바일을 공유합니다. . 터미널 캐러셀 플러그인은 참고용입니다. 구체적인 내용은 다음과 같습니다
다음은 제가 겪었던 문제이며, 캐러셀이 필요하지 않은 경우에도 이 플러그인에서 일반적으로 사용되는 몇 가지 매개변수입니다. 복잡한 문제는 이 글을 읽어보시면 해결하실 수 있습니다. 더 알고 싶으시면 스와이퍼 플러그인 공식 주소를 참고하세요.
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 */ });
어떻게 슬라이드해도 회전목마 이벤트가 다시 발생합니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
WeChat 애플릿에서 목록 풀다운 새로 고침 풀업 로딩 효과를 얻는 방법은 무엇입니까?
WeChat 미니 프로그램에서 디지털 스크롤 플러그인을 사용하는 방법
위 내용은 스와이프 모바일 캐러셀 플러그인 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!