Find the .css
and .js
files that you need in dist
directory and put it in your-path
.
<!-- in <head> -->
<link rel="stylesheet" href="your-path/slideshow.css">
Case 1: Load in HTML
<!-- HTML -->
<script src="your-path/slideshow.js"></script>
Case 2: Use ES module
// JavaScript
import Slideshow from 'your-path/slideshow.module.js'
<!-- Parent -->
<div>
<!-- Slide -->
<ul id="slideshow-list">
<li>
<img src="./assets/01.jpg" alt="">
</li>
<li>
<img src="./assets/02.jpg" alt="">
</li>
<li>
<img src="./assets/03.jpg" alt="">
</li>
</ul>
<!-- Container for pagination -->
<div id="slideshow-pagination"></div>
</div>
const theSlideshow = new Slideshow(
'#slideshow-list', {
navContainer: '#slideshow-pagination',
duration: 4000, // (millisecond)
}
)
theSlideshow.start()