title: Swipe JS - Display 3 Slides at a time
body: <p>I'm using the Swipe JS for a mobile app, I want to display 3 slides at a time (well one central side, and two half slides at the side - so you can just about see the next slides on either side):</p>
  
  <p><img src="https://i.stack.imgur.com/dZ9mc.png" alt="enter image description here"></p>
  
  <p>I've managed to get it so the slide layout are like this. Only issue is that if I start on 1, then 0 is on my left (great), but the last slide (6) is on the right, instead of 2. </p>
  
  <p>And when I slide to the next slide, slide 0 stays there, but slide 1 just moves over the top. I want it so the entire slider moves, not just the left, centre and right.</p>
  
  <p>How would I achieve this?</p>
  
  <pre><code>.swipe {
    overflow: visible;
    position: relative;
  }
  .swipe-wrap {
    overflow: visible;
    position: relative;
  }
  .swipe-wrap &gt; div {
    float:left;
    position: relative;
  }
  
  #myWrapper{
    overflow: hidden;
    width: 620px;
  }
  
  
  &lt;div id='myWrapper'&gt;
    &lt;div id='mySwipe' style='max-width:300px;margin:0 auto' class='swipe'&gt;
      &lt;div class='swipe-wrap'&gt;
        &lt;div&gt;&lt;b&gt;0&lt;/b&gt;&lt;/div&gt;
        &lt;div&gt;&lt;b&gt;1&lt;/b&gt;&lt;/div&gt;
        &lt;div&gt;&lt;b&gt;2&lt;/b&gt;&lt;/div&gt;
        &lt;div&gt;&lt;b&gt;3&lt;/b&gt;&lt;/div&gt;
        &lt;div&gt;&lt;b&gt;4&lt;/b&gt;&lt;/div&gt;
        &lt;div&gt;&lt;b&gt;5&lt;/b&gt;&lt;/div&gt;
        &lt;div&gt;&lt;b&gt;6&lt;/b&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>