Tiny Swiper

一. 基本使用

1
2
3
4
5

HTML代码示例


<div class="tiny-swiper">
  <ul id="tinySwiper1" class="swiper-list">
    <li class="slide-item bg-red"><h1 class='h1'>1</h1></li>
    <li class="slide-item bg-orange"><h1 class='h1'>2</h1></li>
    <li class="slide-item bg-yellow"><h1 class='h1'>3</h1></li>
    <li class="slide-item bg-green"><h1 class='h1'>4</h1></li>
    <li class="slide-item bg-blue"><h1 class='h1'>5</h1></li>
  </ul>
</div>

JS代码示例

 // 基本使用
$('#tinySwiper1').tinySwiper({
  // slides: '.slide-item',   // 幻灯片选择器（非全局搜索） 默认 .slide-item
  slidesProps: {              // 必须设置的幻灯片宽、高属性
    width: 500,
    height: 300
  }
});
// 其余幻灯片大小和定位，都会自动计算

二. 自动轮播

1
2
3
4
5

HTML代码示例


<div class="tiny-swiper">
  <ul id="tinySwiper2" class="swiper-list">
    <li class="slide-item bg-red"><h1 class='h1'>1</h1></li>
    <li class="slide-item bg-orange"><h1 class='h1'>2</h1></li>
    <li class="slide-item bg-yellow"><h1 class='h1'>3</h1></li>
    <li class="slide-item bg-green"><h1 class='h1'>4</h1></li>
    <li class="slide-item bg-blue"><h1 class='h1'>5</h1></li>
  </ul>
</div>

JS代码示例

 // 自动轮播
$('#tinySwiper2').tinySwiper({
  autoplay: true,
  speed: 5000,   // 默认为3000， 建议设置至少为1000
  slidesProps: {
    width: 500,
    height: 300
  }
});

三. 自定义初始化幻灯片聚焦下标

1
2
3
4
5

HTML代码示例


<div class="tiny-swiper">
  <ul id="tinySwiper3" class="swiper-list">
    <li class="slide-item bg-red"><h1 class='h1'>1</h1></li>
    <li class="slide-item bg-orange"><h1 class='h1'>2</h1></li>
    <li class="slide-item bg-yellow"><h1 class='h1'>3</h1></li>
    <li class="slide-item bg-green"><h1 class='h1'>4</h1></li>
    <li class="slide-item bg-blue"><h1 class='h1'>5</h1></li>
  </ul>
</div>

代码示例

 // 自定义初始化幻灯片聚焦下标
$('#tinySwiper3').tinySwiper({
  initialIndex: 2,  // 以0开始，如果为负数，例如-1就代表倒数第1个，以此类推
  slidesProps: {
    width: 500,
    height: 300
  }
});

四. 导航设置与分页&设置幻灯片显示数

1
2
3
4
5
6
7

HTML代码示例


<div class="tiny-swiper">
  <ul id="tinySwiper4" class="swiper-list">
    <li class="slide-item bg-red"><h1 class='h1'>1</h1></li>
    <li class="slide-item bg-orange"><h1 class='h1'>2</h1></li>
    <li class="slide-item bg-yellow"><h1 class='h1'>3</h1></li>
    <li class="slide-item bg-green"><h1 class='h1'>4</h1></li>
    <li class="slide-item bg-blue"><h1 class='h1'>5</h1></li>
    <li class="slide-item bg-pink"><h1 class='h1'>6</h1></li>
    <li class="slide-item bg-purple"><h1 class='h1'>7</h1></li>
  </ul>
  <div class="slide-nav slide-prev"></div>
  <div class="slide-nav slide-next"></div>
  <ul class="slide-pagination">
    <li class="slide-page-item"></li>
    <li class="slide-page-item"></li>
    <li class="slide-page-item"></li>
    <li class="slide-page-item"></li>
    <li class="slide-page-item"></li>
    <li class="slide-page-item"></li>
    <li class="slide-page-item"></li>
  </ul>
</div>

JS代码示例

 // 导航设置与分页&设置幻灯片显示数
$('#tinySwiper4').tinySwiper({
  slidesLen: 5,                   // 轮播图显示数 默认:5 必须为奇数
  slidesProps: {
    width: 500,
    height: 300
  },
  navigation: {
    prev: '.slide-prev',          // 向前轮播选择器 默认 无
    next: '.slide-next'           // 向后轮播选择器 默认 无
  },
  pagination: {
    el: '.slide-page-item',       // 分页选项选择器 默认 无
    activeClass: 'active'         // 分页选项激活添加的类名 默认 无
  }
});
// 注意，由于导航和分页选择器都是全局搜索的，应保持每个swiper中导航和分页选择器之间的独立性。

五. 回调函数

1
2
3
4
5

HTML代码示例


<div class="tiny-swiper">
  <ul id="tinySwiper5" class="swiper-list">
    <li class="slide-item bg-red"><h1 class='h1'>1</h1></li>
    <li class="slide-item bg-orange"><h1 class='h1'>2</h1></li>
    <li class="slide-item bg-yellow"><h1 class='h1'>3</h1></li>
    <li class="slide-item bg-green"><h1 class='h1'>4</h1></li>
    <li class="slide-item bg-blue"><h1 class='h1'>5</h1></li>
  </ul>
</div>

JS代码示例

 // 回调函数
$('#tinySwiper5').tinySwiper({
  slidesLen: 3,                      // 轮播图显示数 默认:5 必须为奇数
  slidesProps: {
    width: 500,
    height: 300
  },
  onSlideStart: function (el) {         // this指向swiper容器, el为将要聚焦的幻灯片DOM元素
    console.log('开始滑动');
  },
  onSlideEnd: function (el) {            // this指向swiper容器，el为已经聚焦的幻灯片DOM元素
    console.log('开始结束');
  },
  onClick: function (order, index) {
    console.log(this)                // 当前被点击幻灯片的DOM
    console.log(order, index)        // 静态下标、动态下标
  }
});

六. 普通模式

1
2
3
4
5

HTML代码示例


<div class="tiny-swiper">
  <ul id="tinySwiper6" class="swiper-list-img">
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img1.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img2.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img3.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img4.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img5.jpg"/>
    </li>
  </ul>
  <ul class="slide-pagination-list">
    <li class="page-item">1</li>
    <li class="page-item">2</li>
    <li class="page-item">3</li>
    <li class="page-item">4</li>
    <li class="page-item">5</li>
  </ul>
</div>

JS代码示例

 // 回调函数
$('#tinySwiper6').tinySwiper({
  autoplay: true,
  slidesLen: 1,                      // 轮播图显示数设置为1，就切换为普通模式
  slides: '.slide-item-img',
  slidesProps: {
    width: '100%',
    height: '100%'
  },
  pagination: {
    el: '.page-item',
    activeClass: 'active'
  }
});
// 注意：若幻灯片数只有一张时，tiny-swiper会自动切换成普通模式

七. 设置幻灯片之间空隙

HTML代码示例


<div class="tiny-swiper">
  <ul id="tinySwiper6" class="swiper-list-img">
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img1.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img2.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img3.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img4.jpg"/>
    </li>
    <li class="slide-item-img">
      <img class="slide-img" src="./images/sliders/img5.jpg"/>
    </li>
  </ul>
</div>

JS代码示例

 // 回调函数
$('#tinySwiper7').tinySwiper({
  slidesLen: 1,                      // 轮播图显示数设置为1，就切换为普通模式
  slidesSpace: 10,                   // 轮播图之间的空隙，当且仅当slidesLen为1时，该属性才生效。
  slides: '.slide-item-img',
  slidesProps: {
    width: '80%',
    height: '100%'
  }
});
// 注意：若幻灯片数只有一张时，tiny-swiper会自动切换成普通模式