Ultra-light Slider In Plain JavaScript – Slidejs

Preview:

Description:

An ultra-light slider & slideshow component that automatically slides through a set of DIVs at a given speed.

Supports custom duration and horizontal/vertical directions.

How to use it:

1. Add slides to the slider container as follows:

<div class="slide-y">
  <div class="slide-a">
    <div class="slide bg1" style="background-color: rgb(44, 103, 158);">hello Spiff</div>
    <div class="slide bg2" style="background-color: rgb(150, 29, 79);">Age: 40</div>
    <div class="slide bg3" style="background-color: rgb(175, 141, 28);">Bonny boy</div>
    <div class="slide bg4" style="background-color: rgb(12, 23, 39);">Life's Good</div>
  </div>
</div>

<div class="slide-x">
  <div class="slide-b">
    <div class="slide bg1" style="background-color: rgb(44, 103, 158);">hello Spiff</div>
    <div class="slide bg2" style="background-color: rgb(150, 29, 79);">Age: 40</div>
    <div class="slide bg3" style="background-color: rgb(175, 141, 28);">Bonny boy</div>
    <div class="slide bg4" style="background-color: rgb(12, 23, 39);">Life's Good</div>
  </div>
</div>

2. Initialize the slider with the following:

• The container property should be the class of the div to contain all slide related elements. It’s required.
• The box property is the name of the class whose element actually contains the slides to be presented. It’s required.
• The duration property holds the number of seconds required for the next turn. It’s in milliseconds and is required.
• The axis property holds either ‘x’ or ‘y’, this tells what direction the scroll property will go.

var slider1 = {
    container: "slide-y",
    box: "slide-a",
    duration: 2000,
    axis: "y"
};
SlideShow(slider1);

var slider2 = {
    container: "slide-x",
    box: "slide-b",
    duration: 2000,
    axis: "x"
};
SlideShow(slider2)

3.  The example CSS for the slider.

.slide-cont {
  width: 100%;
  height: 200px;
}
.slide {
  width: 100%;
  height: 100%;
  color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
}