JQuery Swiper Slider, слайдер ломается в секций с display: none

Question

$(document).ready(function() {
   new Swiper('.swiper-container', {
     navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
     loop: true,
     slidesPerView: 7,
     spaceBetween: 10
   });
  $('button').click(function() {
    $('section').toggleClass('hide');
  });
});

body {
  margin: 0;
  background-color: #333;
}
.swiper-container {
  width: 600px;
  margin-top: 20px;
}
.swiper-slide {
  min-height: 200px;
  background: #fff;
}
.hide {
  display: none;
}

<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<section class="hide">
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
</section>
<button>Open</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

По умолчанию слайдер скрыт, когда я нажимаю кнопку Open тем самым раскрывая слайдер, он просто не работает. Если открыть слайдер и нажать к примеру f12 и убрать инспектор кода, то слайдер становится работоспособным. Не понимаю в чем проблема. Подскажите

Answer 1

Достаточно добавить свойства в инициализацию плагина:

observer: true,
observeParents: true

$(document).ready(function() {
  new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
    slidesPerView: 7,
    spaceBetween: 10,
    observer: true,
    observeParents: true,
  });

  $('button').click(function() {
    $('section').toggleClass('hide');
  });
});

body {
  margin: 0;
  background-color: #333;
}

.swiper-container {
  width: 600px;
  margin-top: 20px;
}

.swiper-slide {
  min-height: 200px;
  background: #fff;
}

.hide {
  display: none;
}

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<section class="hide">
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide">Slide 11</div>
      <div class="swiper-slide">Slide 12</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>
<button>Open</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

БЛОГ НА HUSL

JQuery Swiper Slider, слайдер ломается в секций с display: none

Ответы (1 шт):