1

Проблема в том, что даже при delay: 0 происходит остановка перед сменой слайда. Как ее убрать полностью?

var swiper = new Swiper('#js-carousel', {
  slidesPerView: 3,
  spaceBetween: 30,
  speed: 2000,
  loop: true,
  autoplay: {
    delay: 0,
  },
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="container">
  <div class="row">
    <div class="swiper-container" id="js-carousel">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 1" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 2" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 3" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 4" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 5" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 6" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 7" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 8" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 9" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 10" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

2
  • Что конкретно нужно? чтобы слайдер постоянно был в движении как бегущая строка?
    – user298256
    23 апр 2019 в 9:43
  • @Vearo, Да, как бегущая строка
    – E_K
    23 апр 2019 в 9:55

1 ответ 1

1

Попробуйте в стилях заменить transition-timing-function на linear:

.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}

var swiper = new Swiper('#js-carousel', {  
  slidesPerView: 3,
  spaceBetween: 30,
  speed: 2000,
  loop: true,
  //allowTouchMove: false, // можно ещё отключить свайп
  autoplay: {
    delay: 0,
    disableOnInteraction: false // или сделать так, чтобы восстанавливался autoplay после взаимодействия
  }
});
.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}

.swiper-slide img{
  max-width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="container">
  <div class="row">
    <div class="swiper-container" id="js-carousel">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 1" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 2" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 3" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 4" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 5" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 6" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 7" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 8" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 9" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 10" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

1
  • добро пожаловать на StackOverflow. Очень здорово, что Вы написали ответ. Помимо кода, старайтесь также давать хотя бы минимальные комментарии, которые бы объясняли, что Вы сделали, в чем, возможно, была ошибка ТС и т.д. Ответы просматривают много новичков в программировании и для них может быть мало просто работающего кода. Чем понятнее и подробнее будет расписан ответ, тем он будет полезнее, тем больше будет Ваш личный вклад в сообщество и тем выше у Вас будет рейтинг. 6 окт 2020 в 9:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.