Неправильно работает swiper slider

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

Что-то неправильно стал работать swiper слайдер. Я пробовал добавить в swiper-wraper overlof-hidden, но это не решило мою проблему. Буду рад любой помощи!

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />


<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
            <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<script type="module">
  import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'
  const swiper = new Swiper('.swiper-container', {
// Optional parameters

loop: true,
slidesPerView: 1,
spaceBetween: 30,
// If we need pagination
pagination: {
  el: '.swiper-pagination',
}});</script>

javascript html swiper.js
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Если Вы хотите, чтобы был виден только 1 слайд, то overflow-hidden надо писать не на wrapper, а на его родителя (в вашем случае это swiper-container)

.swiper-container {
  overflow: hidden;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />


<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <h1>Slide 1</h1>
    </div>
    <div class="swiper-slide">
      <h1>Slide 2</h1>
    </div>
    <div class="swiper-slide">
      <h1>Slide 3</h1>
    </div>
    <div class="swiper-slide">
      <h1>Slide 1</h1>
    </div>
    <div class="swiper-slide">
      <h1>Slide 2</h1>
    </div>
    <div class="swiper-slide">
      <h1>Slide 3</h1>
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>
<script type="module">
  import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js';
  const swiper = new Swiper('.swiper-container', {
    // Optional parameters

    loop: true,
    slidesPerView: 1,
    spaceBetween: 30,

    // If we need pagination

    pagination: {
      el: '.swiper-pagination',
    }
  });
</script>