title: Vertical Carousel with multiple heights with Javascript (and Swiper.js)
body: <p>I'm creating a <strong>vertical slider</strong> and I need to have <strong>one</strong> slide bigger than the others. I usually use Flickity but as it doesn't support Vertical slides, I'm using <strong>Swiper.js</strong>.</p>
  
  <p>The thing is every row should be the same size but that's not my case. What I've done is to create a cell that is 2x the size of a normal slide, and then track if I'm going to slide to that cell, then move two slides, so I skip one that it's not used.</p>
  
  <p>The problem is that the last one is hidden. I've added one extra and then hidden the last one. I know it's a very tricky solution.</p>
  
  <p>I think there might be better ways so I wanted to ask if you think my solution could be emproved? I attatch you the code:</p>
  
  <p><a href="https://codepen.io/scros/pen/LYVJKrQ" rel="nofollow noreferrer">https://codepen.io/scros/pen/LYVJKrQ</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var swiper = new Swiper(".swiper-container", {
    direction: "vertical",
    slidesPerView: 4,
    spaceBetween: 15,
  
    // slidesPerGroup: 2,
    cssMode: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true
    }
  });
  console.log(swiper.params);
  
  swiper.on("slideNextTransitionStart", function() {
    console.log("slide changed");
    console.log(swiper.activeIndex);
  
    if (swiper.activeIndex === 1) {
      swiper.slideTo(2, 700);
    }
  });
  
  swiper.on("slidePrevTransitionStart", function() {
    console.log("slide changed");
    console.log(swiper.activeIndex);
  
    if (swiper.activeIndex === 1) {
      swiper.slideTo(0, 700);
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.swiper-container {
    width: 600px;
    height: 500px;
    overflow: hidden;
  }
  
  .swiper-slide {
    border-radius: 0.3rem;
    font-size: 18px;
    color: white;
    background-color: #8ec5fc;
    background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .slide1 {
    padding: 4rem 0;
  }
  
  .wrapper {
    background-color: #eef2f7;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" /&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
        &lt;div class="swiper-slide slide1"&gt;
          &lt;h1&gt;Big Slide&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="swiper-slide slide"&gt;Slide 2&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 4&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 5&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 6&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 7&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 8&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 9&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 10&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks!</p>