0

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>
Dan
  • 1,565
  • 3
  • 23
  • 43

1 Answers1

0
justify-content: center;

with

justify-content: space-between;

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

Humberto
  • 1
  • 1