Multiple item carousel

Rahul Raidas — Thu, 15 Oct 2020 16:52:19 +0000

Few things to know when make multiple image slider
1 Javascript Dom properties
a offsetwidth
b queryselector
c queryselectorAll
d event

How to make Slider(Carousel)

Rahul Raidas — Tue, 13 Oct 2020 17:17:56 +0000

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:

DEV Community: Rahul Raidas

Multiple item carousel

How to make Slider(Carousel)