2

Как убрать стандартную смену слайдов на слайдере Swiper ? И поставить обычную плавную замену картинок без никаких выезжаний з правого края ? То есть нужно чтобы следующий слайд просто заменял предыдущий и все без никакой анимации. У меня стоит смена слайдов по времени если что.

2 ответа 2

1

Вероятно вам подойдет опция effect: 'fade' из API Swiperjs, чтобы использовать анимацию плавного появления и исчезновения слайдов в качестве анимации смены активного слайда.

При использовании данной опции, вы должны иметь ввиду, что этот режим предполагает один активный слайд.

Пример для наглядности:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper Fade эффект</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }
    
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    
    .swiper {
      width: 100%;
      height: 200px;
    }
    
    .swiper-slide {
      background-position: center;
      background-size: cover;
      height: 200px;
    }
    
    .swiper-slide img {
      display: block;
      width: 100%;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
  </div>

  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      effect: "fade",
    });
  </script>
</body>

</html>

В дополнение можете управлять продолжительностью смены слайдов через опцию speed: 0, чтобы сделать мгновенную смену слайда:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper Fade эффект</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }
    
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    
    .swiper {
      width: 100%;
      height: 200px;
    }
    
    .swiper-slide {
      background-position: center;
      background-size: cover;
      height: 200px;
    }
    
    .swiper-slide img {
      display: block;
      width: 100%;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
  </div>

  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      effect: "fade",
      speed: 0,
    });
  </script>
</body>

</html>

0

У Swiper отличная документация, есть даже примеры с кодом как и что сделать, всё что вам нужно, чуть-чуть почитать и проявить смекалку.

Демо замены слайда - https://swiperjs.com/demos#effect-fade
Опция автоплея - https://swiperjs.com/swiper-api#autoplay
Скорость анимации - https://swiperjs.com/swiper-api#param-speed

Сможете самостоятельно объединить?

Ваш ответ

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