Basic Slider Plugin For JavaScript – OlumSlider

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
});