How to make Slider(Carousel)

#javascript #html #css

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: