This is a Native Javascript Slider that can be used in your html code using classnames.
If this is your first time getting started. Below is a short guide on how to implement the slider into your code.
<div class="slider autoplay">
<div class="slide slide-1 active">
<div>Hello test slider</div>
</div>
<div class="slide slide-2">
<div>Hello test slider</div>
</div>
<div class="slide slide-3">
<div>Hello test slider</div>
</div>
</div>The main slider component is made of 3 or 4 main classnames
- slider -> the slider class is the added to the container element in other to initialize the slider.
- slide -> the slide is added as a child component to the slider container which indicates that this is a single slide. What ever is contained here would be regarded as the children of the slide
- active -> the active class is added to the first slide or whatever slide to indicate the starting point of the slider.
- autoplay -> this is an optional class that can be added to make the slides to automatically start changing within a few seconds.
<div class="buttons">
<div class="next">></div>
<div class="prev"><</div>
</div>
<div class="dots"></div>Finally, the arrows and dots are finally added using classnames too. The classnames that are added here are specified below
- buttons class -> this class is added to the container of the arrows. this will enable the slider determine the arrangement and display of the arrows
- next class -> this will be responsible for the arrow for changing the slide to the next slide. icons and other indicators can be used here.
- prev class -> this is same as the next class but this takes us to the previous slide
- dots class -> this is added in other to add the dots for the slides as an indicator