How to make Slider(Carousel)

AS a frontEnd developer, here is the step by step code ,how to code carousel(slider).
step1.(HTML)

step1.(css)

step 2.(HTML)
inside carousel

step 2.(css)

in a section class we use flex basis property. because of this each section item spaces equally to each other;

in web browser shows like that

in slider class slider has a six childrens. and each equally spaces 100% so total slider width is (100* multiply by number of slider childrens).beacuse of this, each section has full width.
.slider{
width:600%;
}

after this ,in web browser

now align the each section item center

in section tag ,you can add background images, other things also

add buttons

css for button:

for smooth sliding : add transition property in slider class
and horizontal slide none , to add overflow:hidden property in carousel class.
add javaScript:

result:

Comments

[Rahul Raidas]

I use brackets ide with light theme

[Travis Fantina]

Hey @rahulra08598872 great post, you may want to use code blocks rather than images for the code.

[Rahul Raidas]

OK, I am using first time.

[Travis Fantina]

No worries just wanted to point it out for future reference. Good article.