Написал swiper, но при увеличении экрана (zoom) ведёт себя ужасно, как исправить?

Question

Написал swiper, но при увеличении экрана (zoom) ведёт себя ужасно, как исправить?

Рейтинг: 0Ответов: 1Опубликовано: 29.06.2023

Написал swiper, но словил баг (при расширении экрана zoom) всё дёргается — видео.
Demo.

Код swiper:

// Initialize Swiper
var swiper = new Swiper(".mySwiper", {
  slidesPerView: "3",
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
  breakpoints: {
    1040: {
      slidesPerView: 3
    },
    768: {
      slidesPerView: 2
    },
    100: {
      slidesPerView: 1
    }
  }
});

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;
}

.wrapper {
  max-width: 2700px;
  margin: 0 auto;
  padding: 1%;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  padding: 0 0 50% 0;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
</head>

<body>
  <!-- Swiper -->
  <div class="wrapper">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://uploads.codesandbox.io/uploads/user/93d08122-5887-46b5-b1ef-18a561479944/A-GO-spain-1.jpg" alt="Spain-1" />
        </div>
        <div class="swiper-slide">
          <img src="https://uploads.codesandbox.io/uploads/user/93d08122-5887-46b5-b1ef-18a561479944/z4mC-spain-2.jpg" alt="Spain-2" />
        </div>
        <div class="swiper-slide">
          <img src="https://uploads.codesandbox.io/uploads/user/93d08122-5887-46b5-b1ef-18a561479944/nXC0-spain-3.jpg" alt="Spain-3" />
        </div>
        <div class="swiper-slide">
          <img src="https://uploads.codesandbox.io/uploads/user/93d08122-5887-46b5-b1ef-18a561479944/umwX-spain-4.jpg" alt="Spain-4" />
        </div>
        <div class="swiper-slide">
          <img src="https://uploads.codesandbox.io/uploads/user/93d08122-5887-46b5-b1ef-18a561479944/8xxP-spain-5.jpg" alt="Spain-5" />
        </div>
        <div class="swiper-slide">
          <img src="https://uploads.codesandbox.io/uploads/user/93d08122-5887-46b5-b1ef-18a561479944/Ope4-spain-6.jpg" alt="Spain-6" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</body>

</html>

Это нормально? Как это исправить?

css javascript html swiper.js

Источник: Stack Overflow на русском

Answer 1

▲ 0

Здесь происходит следующее: при зуме браузер увеличивает картинки, но при этом размер экрана уменьшается. Свайпер замечает, что изменились размеры области отрисовки и подгоняет размеры слайдов под новый размер. Что и проявляется в дёргании картинок. Если же уменьшать масштаб, то экран увеличивается, область отрисовки не изменяется - остаётся 2700 px. Свайпер ничего не меняет, дёргания не происходят.

Проблема, судя по всему - в свайпере. Вместо того, чтобы выставлять размеры слайдов в процентах, он периодически проверяет размеры области и перевычисляет размеры слайдов

– Виктор Карев

Я буду использовать библиотеку swiper для небольших свайперов. Присмотрюсь к другим либам для большого свайпера.

Написал swiper, но при увеличении экрана (zoom) ведёт себя ужасно, как исправить?

Код swiper:

Ответы