JavaScript简单旋转木马滑块 – tCarousel.js
栏目分类:幻灯片 / 轮播图   发布日期:2021-09-24   浏览次数:

一个轻量级、易于实现的轮播滑块库,易于通过 CSS 类和 HTML 数据属性进行配置。

使用:

1. 要使用轮播库,请在页面上包含以下 JavaScript 和样式表。

<link rel="stylesheet" href="css/tCarousel.css" />
<script src="js/tCarousel.js" defer></script>

2. 创建一个水平旋转木马滑块。请注意,每个滑块必须具有唯一的 ID。

<div class="t-carousel t-h" id="myCarousel">
  <!-- Slides -->
  <div class="t-items">
    <div class="t-item">
      <p class="content p-1">1</p>
    </div>
    <div class="t-item">
      <p class="content p-2">2</p>
    </div>
    <div class="t-item">
      <p class="content p-3">3</p>
    </div>
    <div class="t-item">
      <p class="content p-4">4</p>
    </div>
    <div class="t-item">
      <p class="content p-5">5</p>
    </div>
  </div>
  <!-- Navigation Buttons -->
  <button class="t-btn t-left">
    左
  </button>
  <button class="t-btn t-right">
    右
  </button>
  <button class="t-btn t-up">
    上
  </button>
  <button class="t-btn t-down">
    下
  </button>
</div>

3.要创建一个垂直传送带滑块,只需更换t-h用t-v。

<div class="t-carousel t-v" id="myCarousel">
  ...
</div>

4. 设置滑块滚动的方向。可能的值:left, right, up, or down。

<div class="t-carousel t-v" id="myCarousel" data-tc-direction="down">
  ...
</div>

5. 以秒为单位指定动画速度。

<div class="t-carousel t-v" id="myCarousel" data-tc-time-sec="3">
  ...
</div>

6. 初始化并重新初始化轮播滑块。

// 初始化
tCarousel.tInit();
 
// 销毁
tCarousel.tClear();
 
// 禁用自动播放
tCarousel.tClear({ 
  only_Automatic: true
});


官方网站:https://github.com/ovatlh/tCarousel-js

相关热词: tCarousel-js

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库