移动端 旋转木马轮播图 可触摸

效果

介绍

支持pc、移动端
pc左右箭头控制
移动端左右滑动

兼容性

ie >= 10
其他主流浏览器都支持

使用文档：

<!-- css -->
<link rel="stylesheet" href="../css/3dSwiper.css">

<!-- html -->
<div class="swiper-container">
    <ul class="swiper-wrap">
      <li><img src=""></li> 
      <li><img src=""></li>
      <li><img src=""></li> 
    </ul>
    <ul class="swiper-dots"></ul>
    <ul class="swiper-navigator">
        <li class="swiper-btn-prev">&lt;</li>
        <li class="swiper-btn-next">&gt;</li>
    </ul>
</div>

<!-- js -->
<script src="../js/3dSwiper.js"></script>
<script>
        new Swiper(".swiper-container",{
            pagination: ".swiper-dots",
            navigator: {
                prev: ".swiper-btn-prev",
                next: ".swiper-btn-next"
            }
        });
</script>

注意事项：

1. 图片数量要 3+
2. 图片尺寸会比原来的缩小0.6倍，原来是180px,页面上会变成 180 * 0.6 = 108px

在线预览地址
下载地址

---

关键词： 旋转木马 移动端轮播图 手机