carousel with html,css and javascript

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 first impression.

Step1:

HTML

The list shows three items within carousel container.And two arrow buttons beside the container.
The carousel nav is three dots which are equal to themselves.

Step2:
CSS

The container is fixed size being hidden when oversized.

The arrow positioned in the center of the container.

Three indicators placed in the bottom of container.

Step3:

Javascript

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 complete code Github DOWNLOAD

I love the way he code,easy to understand and systematic. 

The youtube tutorial here

x