title: how to make slide transition smoother and not instant on swiper update - Swiper API
body: <p>I'm using Swiper API to create a mobile-friendly slider but I need to find a way to make the swiper.update() method reposition the slides smoothly and not instantly placing them upon removing a slide.</p>
  <p>Right now when removing a slide and calling swiper.update to reposition the remaining slides, it just reposition the remaining slides instantly. How can I make it run the same way but with a smoother reposition of the slides?</p>
  <p>Link for Swiper API: <a href="https://swiperjs.com/swiper-api" rel="nofollow noreferrer">https://swiperjs.com/swiper-api</a></p>
  <p>Initialization of Swiper</p>
  <pre><code>swiper = new Swiper(&quot;.mySwiper&quot;, {
      slidesPerView: 3,
      allowTouchMove: true,
      allowSlideNext: true,
      allowSlidePrev: true,
      spaceBetween: 5,
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      pagination: {
          el: &quot;.swiper-pagination&quot;,
          clickable: true,
      },
  });
  
  swiper.setTransition(this, 0.3);
  </code></pre>
  <p>EDIT: As requested I created an example code to run and reproduce the issue. As you can see with the code provided below when you remove a slide the transition that repositions the remaining slides is instant. I need to find a way to make it smoother. To position the remaining slides slower and not instantly. Is there a way to do that?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/swiper/swiper-bundle.min.css&quot;/&gt;
          &lt;script src=&quot;https://unpkg.com/swiper/swiper-bundle.min.js&quot;&gt;&lt;/script&gt;
          &lt;style&gt;
              html, body {
                  padding: 0;
                  margin: 0;
              }
  
              body {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
              }
  
              .swiper {
                  width: 100%;
                  height: 500px;
                  margin-left: 10px !important;
                  margin-right: 10px !important;
                  box-sizing: border-box;
              }
  
              .swiper-slide {
                  background-size: cover !important;
                  border: 2px solid darkgray;
                  box-sizing: border-box;
                  text-align: center;
                  font-size: 18px;
                  background: #fff;
                  /* Center slide text vertically */
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: -webkit-flex;
                  display: flex;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  -webkit-justify-content: center;
                  justify-content: center;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  -webkit-align-items: center;
                  align-items: center;
                  transition: 0.3s all ease;
              }
  
              .swiper-slide img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
              }
  
              .removeSlideBtn {
                  margin-top: 50px;
                  line-height: 30px;
                  cursor: pointer;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;swiper&quot;&gt;
              &lt;!-- Additional required wrapper --&gt;
              &lt;div class=&quot;swiper-wrapper&quot;&gt;
                &lt;!-- Slides --&gt;
                &lt;div class=&quot;swiper-slide&quot;&gt;Slide 1&lt;/div&gt;
                &lt;div class=&quot;swiper-slide&quot;&gt;Slide 2&lt;/div&gt;
                &lt;div class=&quot;swiper-slide&quot;&gt;Slide 3&lt;/div&gt;
                &lt;div class=&quot;swiper-slide&quot;&gt;Slide 4&lt;/div&gt;
                &lt;div class=&quot;swiper-slide&quot;&gt;Slide 5&lt;/div&gt;
                ...
              &lt;/div&gt;
              &lt;!-- If we need pagination --&gt;
              &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;button class=&quot;removeSlideBtn&quot; onclick=&quot;RemoveSlide();&quot;&gt;Remove Slide&lt;/button&gt;
      &lt;/body&gt;
      &lt;script&gt;
          var swiper = new Swiper(&quot;.swiper&quot;, {
              slidesPerView: 3,
              allowTouchMove: true,
              allowSlideNext: true,
              allowSlidePrev: true,
              spaceBetween: 5,
              navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
              },
              pagination: {
                  el: &quot;.swiper-pagination&quot;,
                  clickable: true,
              },
          });
  
          swiper.setTransition(this, 300);
  
          function RemoveSlide() {
              var slide = Math.floor(Math.random() * swiper.slides.length);
              swiper.removeSlide(slide);
          }
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>