This is the tutorial learned from Kevin Powell who is my top list YouTuber. He taught me a lot about CSS thoughts and new stuff.
I used to write the carousel demo before:
Auto slides with Javascript
Javascript animated frame slides
And also some slides without Javascript:
CSS slides without Javascript
View switcher without Javascript
CSS animation slider
Also some slides with jQuery library:
Slick.js
Rotating-slider.js
Xslider.js
flexSlider.js
Swiper.js
Kevin’s example is my new year's first impression.
HTML
The list shows three items within the carousel container. And two arrow buttons beside the container.
The carousel nav is three dots that are equal to themselves.
CSS
The container is fixed size being hidden when oversized.
The arrow is positioned in the center of the container.
Three indicators are placed at the bottom of the container.
Select all the elements we need later.
Calculate the wide of slides and posit each in.
Three functions about when moving the slides which is the basic one, updateDots when click the arrow buttons or click the dots and the lastone is the function when at first image or last image, the arrow button hides instead.
They are all events when clicked. And it’s comprehensive to handle with class current-slide.
My full code Github DOWNLOAD
I love the way he codes, is easy to understand, and systematic.
The youtube tutorial here
👉Follow me for more useful web development content! love sharing🥰
