幻灯片模块

本页内容

该模块实现了一个简单的幻灯片,博客相关文章 正是基于此模块开发的。

Modulegithub.com/hbstack/slide
Repository⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
UsageSee how to use modules.

例子

 1<div class="slide">
 2  <div class="slide-inner row row-cols-3">
 3    <div
 4      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
 5      style="height: 200px;">
 6      1
 7    </div>
 8    <div
 9      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
10      style="height: 200px;">
11      2
12    </div>
13    <div
14      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
15      style="height: 200px;">
16      3
17    </div>
18    <div
19      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
20      style="height: 200px;">
21      4
22    </div>
23    <div
24      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
25      style="height: 200px;">
26      5
27    </div>
28    <div
29      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
30      style="height: 200px;">
31      6
32    </div>
33    <div
34      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
35      style="height: 200px;">
36      7
37    </div>
38    <div
39      class="slide-item col me-2 bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
40      style="height: 200px;">
41      8
42    </div>
43    <div
44      class="slide-item col bg-dark border border-5 d-flex align-items-center justify-content-center text-white"
45      style="height: 200px;">
46      9
47    </div>
48  </div>
49  <button class="slide-control-left">Prev</button>
50  <button class="slide-control-right">Next</button>
51</div>
1
2
3
4
5
6
7
8
9