A simple autoplay slideshow with Next.js

In this article, we will create an autoplay slideshow loop with Next.js in a simple, easy way. You can see the demo here --> https://autoplay-sliders-wkasiban.vercel.app or look at the code here --> https://github.com/WKasiban/autoplay-sliders

First of all, we separate big tasks into 3 small parts.

1. read .md file and render it on the page
2. create sliders
3. make it autoplay

1. Read and render .md file

Upload pictures and put them in the public folder

I use Markdown for the block and sliders.

In the .md file, I have this.

Tip: Put the address of each image after the image: on front matter

To parse markdown, you have to install remark.
To turn from markdown to HTML, you have to install remark-html. To convert string in markdown to an object, you have to install gray-matter

2. Create sliders

I use the radio button for making a tab.

The result will be like this.

And then it is the time to make hands dirty with CSS.

Tips:

1. setting the div container of content as positon: absolute; and the div of tab as position: relative;
2. setting left: 0; to avoid all of the content not completely overlapping each other.

Almost done! Now we've got tabs that roll by click.

3. Make it autoplay

Time to make our slides autoplay, in this way, we need to use useEffect() and setTimeout() to autoplay the sliders for a period of time.

The react setState radioSelected is like an on and off switch for autoplay. In every 4000 millisecond, the setState will be changed and the slide will roll to another slide, forever.