I am trying to create a basic slider with 3 slides. The idea is to show the second slide on initial view, if the user swipes left, the slider will show the first slide, if the user swipes right it will show the right slide.
I have the initial slider working but I can't centre it. If I use justify-content on the main wrapper, I'm unable to slide to the first slide.
Here's the code
body { -webkit-overflow-scrolling: touch; } .wrapper { scroll-snap-type: x mandatory; scroll-padding: 0px; scroll-padding-left: 0px; display: flex; overflow-x: scroll; height: 400px; width: 100vw; /* justify-content: center; */ } ::-webkit-scrollbar { display: none; } .item { scroll-snap-align: start; scroll-snap-stop: always; flex: 0 0 calc(100vw); height: 400px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; color: whitesmoke; font-size: 64px; } .item-a { background-color:green; flex: 0 0 calc(150px); } .item-b { background-color:red; } .item-c { background-color:blue; flex: 0 0 calc(150px); }<main><div class="wrapper"><div id="item-a" class="item item-a">a</div><div id="item-b" class="item item-b">b</div><div id="item-c" class="item item-c">c</div></div></main>