Author: | olumjs |
---|---|
Views Total: | 166 views |
Official Page: | Go to website |
Last Update: | October 20, 2021 |
License: | MIT |
Preview:

Description:
OlumSlider is a tiny slider JavaScript plugin for creating responsive, flexible, auto-rotating sliders on the page.
How to use it:
1. Add slides to the slider.
<div id="slider"> <div class="slide">1</div> <div class="slide">2</div> <div class="slide">3</div> ... </div>
2. The basic styles for the slider.
slider { height: 500px; } #slider .slide { line-height: 500px; text-align: center; color: white; font-size: 30px; }
3. Download and load the OlumSlider.js library in the document.
<script src="olum-slider.js"></script>
4. Initialize the slider.
new OlumSlider({ container: document.getElementById("slider"), });
5. Determine whether to show pagination dots and navigation arrows.
new OlumSlider({ container: document.getElementById("slider"), arrows: true, dots: true, });
6. Determine whether to enable autoplay.
new OlumSlider({ container: document.getElementById("slider"), auto: true, interval: 3000, // in ms });
7. Customize the navigation arrows.
new OlumSlider({ container: document.getElementById("slider"), nextArrowIcon: "", // html & text prevArrowIcon: "", // html & text });