使用滚动捕捉和弯曲时将 CSS slider 居中

Question

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>

Answer 1

justify-content: center;

with

justify-content: space-between;

I think shoud work for your example. here is an explaination from developer mozilla site