title: How to specify the same transition speed for all slides, regardless of their width?
body: <p>How to specify the same transition speed for all slides, regardless of their width? Now the transition speed depends on the width of the slide - the wider the slide, the faster the transition occurs.</p>
  
  <p><a href="https://codepen.io/anon/pen/XoyZNr" rel="nofollow noreferrer">https://codepen.io/anon/pen/XoyZNr</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>const slider = document.querySelector('.slider');
  const sl = new Swiper(slider, {
    slidesPerView: 'auto',
    loop: true,
    speed: 5000,
    autoplay: {
      enabled: true,
      delay: 1,
    },
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
    overflow: hidden;
  }
  
  .swiper-slide {
    width: auto;
    margin-right: 20px;
  }
  
  .slider__item {
    font-size: 24px;
    padding: 12px 32px;
    background-color: #ccc;
  }
  
  .swiper-wrapper {
    transition-timing-function: linear;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" /&gt;
  &lt;div class="slider"&gt;
    &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slider__item"&gt;#looooooo&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slider__item"&gt;#hellohellohellohellohello&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slider__item"&gt;#hi&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slider__item"&gt;#Lorem, ipsum dolor&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slider__item"&gt;#foo&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slider__item"&gt;#boo&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slider__item"&gt;#go&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>