Slide Module

Donate

Become a backer or sponsor to support our work.

On this page

Sponsors

The module implements a simple slide, the blog related posts module was built on top of it.

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.

Example

 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
razonyang
Sunday, December 22, 2024 Friday, April 14, 2023