Scooch移动端优先的图片轮播器

联合创作 · 2023-10-02 07:32

Scooch是移动端优先的旋转木马效果的图片轮播器。

安装

使用示例代码:

<!-- include scooch.css -->
<link rel="stylesheet" href="scooch.css">
<link rel="stylesheet" href="scooch-style.css">

<!-- the viewport -->
<div class="m-scooch m-fluid m-scooch-photos">
  <!-- the slider -->
  <div class="m-scooch-inner">
    <!-- the items -->
    <div class="m-item m-active">
      <img src="image1.jpg">
    </div>
    <div class="m-item">
      <img src="image2.jpg">
    </div>
    <div class="m-item">
      <img src="image3.jpg">
    </div>
  </div>
  <!-- the controls -->
  <div class="m-scooch-controls m-scooch-bulleted">
    <a href="#" data-m-slide="prev">Previous</a>
    <a href="#" data-m-slide="1" class="m-active">1</a>
    <a href="#" data-m-slide="2">2</a>
    <a href="#" data-m-slide="3">3</a>
    <a href="#" data-m-slide="next">Next</a>
  </div>
</div>

<!-- include jquery.js -->
<script src="jquery.js"></script>
<!-- include scooch.js -->
<script src="scooch.js"></script>
<!-- construct the carousel -->
<script>$('.m-scooch').scooch()</script>

效果演示。

浏览 10
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报