CODEWITHSUNDEEP
javascripthtmlcssswiper.js
keks
keks

Reputation: 91

How to specify the same transition speed for all slides, regardless of their width?

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.

https://codepen.io/anon/pen/XoyZNr

const slider = document.querySelector('.slider');
const sl = new Swiper(slider, {
  slidesPerView: 'auto',
  loop: true,
  speed: 5000,
  autoplay: {
    enabled: true,
    delay: 1,
  },
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" />
<div class="slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slider__item">#looooooo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hellohellohellohellohello</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hi</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#Lorem, ipsum dolor</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#foo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#boo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#go</div>
    </div>
  </div>
</div>

Upvotes: 8

Views: 40707

Answers (1)

S Raghav
S Raghav

Reputation: 1526

This seems to be dependent on the width of the elements themselves and I was not able to find a way to perform calculations to the width when passing the speed parameter.

I'd like to suggest a workaround for this issue till we find an answer, you can either set a constant width by removing width: auto or allow swiper to do it for you by setting the slidesPerView attribute and make the text look pretty by centering it. I think a good value is the floor(max width of current screen form factor / width of the largest slide) so if your largest slide is 120px in width and the target screen is 240px, you can fit 2 slides in at a time.

const slider = document.querySelector('.slider');
const sl = new Swiper(slider, {
  slidesPerView: 'auto',
  loop: true,
  speed: 5000,
  slidesPerView: '2',
  autoplay: {
    enabled: true,
    delay: 1,
  },
});
.slider {
  overflow: hidden;
}

.swiper-slide {
  width: auto;
  margin-right: 20px;
}

.slider__item {
  font-size: 24px;
  padding: 12px 32px;
  background-color: #ccc;
  text-align: center;
}

.swiper-wrapper {
  transition-timing-function: linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" />
<div class="slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slider__item">#looooooo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hellohellohellohellohello</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hi</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#Lorem, ipsum dolor</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#foo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#boo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#go</div>
    </div>
  </div>
</div>

Upvotes: 11

Related Questions