Swiper使用方法

来源:互联网 发布:惠斯通电桥测电阻数据 编辑:程序博客网 时间:2024/05/16 09:04
// 1、首页需要引入swiper.min.js和swiper.min.css文件<link rel="stylesheet" href="path/to/swiper.min.css"><script src="path/to/swiper.min.js"></script>// 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 class="swiper-button-prev"></div>    <div class="swiper-button-next"></div>    <!-- 如果需要滚动条 -->    <div class="swiper-scrollbar"></div></div>导航等组件可以放在container之外// 3、你可能想要给Swiper定义一个大小,当然不要也行。.swiper-container {    width: 600px;    height: 300px;}  // 4、初始化Swiper:最好是挨着</body>标签<script>          var mySwiper = new Swiper ('.swiper-container', {    direction: 'vertical',    loop: true,    // 如果需要分页器    pagination: '.swiper-pagination',    // 如果需要前进后退按钮    nextButton: '.swiper-button-next',    prevButton: '.swiper-button-prev',    // 如果需要滚动条    scrollbar: '.swiper-scrollbar',  })          </script></body>// 页面加载<script type="text/javascript">window.onload = function() {  ...}</script><script type="text/javascript">$(document).ready(function () { ...})</script>
0 0
原创粉丝点击