Create Slideshow with javascript

Tram Ho

With front-end, working with slideshows is a common practice, there are many types of slides as well as a lot of support plugins.
But sometimes for some reason or you want to create your own slideshow to customize as you like.
Today I would like to share how to create a basic slide with Javascript
Hope it will help you !!!
Let’s go.

First, I will create the HTML structure of the slide as follows:

Here you see that both the class and id are the same, you don’t need to care simply because I just want to style css with class.

Next in the file * .js we create a class that includes the necessary input parameters as follows:

Here we have: items of slides, nav slides, button next / prev slides, autoplay slides, and can change the time of effects (duaEffect) as well as the timeout of a slide (duaration).

Now we will write the functions to be able to execute a complete slide:

Create and set height for slides

Next / Prev slides based on slide current.

The handle when changing slides, here I use Velocity.js is an interesting javascript library for creating motion effects like Fade, Slide, Scroll, Stop, Finish and Reverse …
More reference here: GitHub: https://github.com/julianshapiro/velocity

Next is to handle the Nav Slide section and click the slide’s Next / Prev button.
Here I have finished the js section for the slide and just call the Slide class to execute:

Finally, the css for the slide and its components is as follows:

So we have a basic slideshow to use, you can customize it further according to your requirements
can see more results here (Velocity runs on this a bit imprisoned: d) https://codepen.io/yes_no8x/pen/KGerEP
Thank you for your interest!

Share the news now

Source : ITZone via Viblo