JavaScript中的响应式多幻灯片轮播 - Tinyslide
栏目分类:幻灯片 / 轮播图   发布日期:2021-10-12   浏览次数:

一个小巧但响应迅速且可自定义的轮播组件,允许在幻灯片视图上播放多张幻灯片。

使用:

1. 安装并导入 Tinyslide。

# Yarn
$ yarn add Tinyslide
 
# NPM
$ npm i Tinyslide
import Tinyslide from 'Tinyslide';

2. 或者将主要的 JavaScript 导入到文档中。

<script src="./dist/index.js"></script>

3. 将您的内容(图像和描述)添加到轮播。

<section class="grid tinyslide">
  <div class="grid-item" style="background-image:url('1.jpg');">
    <div class="grid-item-body">
      <span class="item-title">A</span>
      <p class="item-extra">Slide 1</p>
    </div>
  </div>
  <div class="grid-item" style="background-image:url('2.jpg');">
    <div class="grid-item-body">
      <span class="item-title">B</span>
      <p class="item-extra">Slide 2</p>
    </div>
  </div>
  <div class="grid-item" style="background-image:url('3.jpg');">
    <div class="grid-item-body">
      <span class="item-title">C</span>
      <p class="item-extra">Slide 3</p>
    </div>
  </div>
</section>

4. 初始化 Tinyslide。这将从 CSS 类为tinyslide.

window.Tinyslide.AutomaticBuild();

5. 您也可以通过传递特定的选择器来初始化 Tinyslide,如下所示:

window.Tinyslide.Build('.my-custom-class',{
  // options here
})

6. 轮播的示例 CSS 样式。

.grid {
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.grid .grid-item {
  width: calc(100% / 3);
  background-size: cover;
  background-position: 50% 50%;
}
.grid .grid-item-body {
  padding-top: 30%;
  position: relative;
}
.grid .grid-item-body .item-title {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(255, 255, 255, 0.8);
  display: inline-block;
  font-size: 2em;
  line-height: 1em;
  height: 1em;
  min-width: 0.5em;
  padding: 0.1em 0.5em 0.3em 0.2em;
  border-radius: 3px 3px 100% 3px;
}
.grid .grid-item-body .item-extra {
  margin: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

7. 可用的轮播选项。

window.Tinyslide.Build('.my-custom-class',{
  style:{
    "size": 1,
    "speed": "2s",
    "autoplay": "3s",
    "btn-width": "0",
  }
})

官方网站:https://github.com/ldbglobe/tinyslide

相关热词: tinyslide幻灯片轮播

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