Слайды накладываются друг на друга

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

Добавил слайдер-swiper на сайт, всю работу с ним закончил (помимо адаптива), но заметил что слайды накладываются друг на друга, хотя у других такого просто не происходит. Вот код:

const swiper = new Swiper(".swiper", {
    effect: "fade",
    loop: true,
    pagination: {
        el: ".swiper-pagination",
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
});
.slider{
  background-color: #F6F8FA;
}

.swiper-slide{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 135px;
}

.slide__title{
  font-family: Montserrat;
  font-size: 40px;
  line-height: 1.3;
  max-width: 705px;
  margin-bottom: 35px;
}

.slide__text{
  max-width: 560px;
  color: #777777;
}

.swiper-button-prev::after,
.swiper-button-next::after{
  color: #333333;
}

.swiper-button__decor{
  position: absolute;
  display: inline-block;
  height: 3px;
  width: 30px;
  background-color: #333333;
}

.swiper-button__decor-prev{
  left: 5px;
}

.swiper-button__decor-next{
  right: 5px;
}

.swiper-pagination-bullets{
  width: initial !important;
  padding-left: 135px;
}

.swiper-pagination-bullet{
  width: 6px;
  height: 6px;
}

.swiper-pagination-bullet-active{
  background-color: #242121;
  width: 10px;
  height: 10px;
}
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&family=Montserrat:wght@300;700&family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
     <link href="css/style.css" rel="stylesheet">
    </head>
  <body>
  <section class="slider">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 1
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 2
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 3
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 4
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 5
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 6
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev swiper-button">
        <span class="swiper-button__decor swiper-button__decor-prev"></span>
      </div>
      <div class="swiper-button-next swiper-button">
        <span class="swiper-button__decor swiper-button__decor-next"></span>
      </div>
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  <script src="js/main.js"></script>
 </body>
 </html>

Ответы

▲ 1Принят

Не ясно почему, но проблема вызвана именно параметром effect: "fade".
Он сам не хочет неактивные слайды заменять на opacity: 0, а должен.

Реализовал данный эффект при помощи effect: "creative" - всё работает отлично.

const swiper = new Swiper(".swiper", {
  loop: true,
  pagination: {
    el: ".swiper-pagination",
  },
  effect: 'creative',
  creativeEffect: {
    prev: {
      opacity: 0
    },
    next: {
      opacity: 0
    },
  },
  autoplay: {
      delay: 3000,
      disableOnInteraction: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
@import url('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css');

.slider {
  background-color: #F6F8FA;
}

.swiper-slide {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 135px;
  position: relative;
  box-sizing: border-box;
}

.slide__title {
  font-family: Montserrat;
  font-size: 40px;
  line-height: 1.3;
  max-width: 705px;
  margin-bottom: 35px;
}

.slide__text {
  max-width: 560px;
  color: #777777;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  color: #333333;
}

.swiper-button__decor {
  position: absolute;
  display: inline-block;
  height: 3px;
  width: 30px;
  background-color: #333333;
}

.swiper-button__decor-prev {
  left: 5px;
}

.swiper-button__decor-next {
  right: 5px;
}

.swiper-pagination-bullets {
  width: initial !important;
  padding-left: 135px;
}

.swiper-pagination-bullet {
  width: 6px;
  height: 6px;
}

.swiper-pagination-bullet-active {
  background-color: #242121;
  width: 10px;
  height: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<section class="slider">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h3 class="slide__title">
          Then they show that show to the people who make shows 1
        </h3>
        <p class="slide__text">
          The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
        </p>
      </div>
      <div class="swiper-slide">
        <h3 class="slide__title">
          Then they show that show to the people who make shows 2
        </h3>
        <p class="slide__text">
          The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
        </p>
      </div>
      <div class="swiper-slide">
        <h3 class="slide__title">
          Then they show that show to the people who make shows 3
        </h3>
        <p class="slide__text">
          The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
        </p>
      </div>
      <div class="swiper-slide">
        <h3 class="slide__title">
          Then they show that show to the people who make shows 4
        </h3>
        <p class="slide__text">
          The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
        </p>
      </div>
      <div class="swiper-slide">
        <h3 class="slide__title">
          Then they show that show to the people who make shows 5
        </h3>
        <p class="slide__text">
          The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
        </p>
      </div>
      <div class="swiper-slide">
        <h3 class="slide__title">
          Then they show that show to the people who make shows 6
        </h3>
        <p class="slide__text">
          The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
        </p>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev swiper-button">
      <span class="swiper-button__decor swiper-button__decor-prev"></span>
    </div>
    <div class="swiper-button-next swiper-button">
      <span class="swiper-button__decor swiper-button__decor-next"></span>
    </div>
  </div>
</section>

▲ 0

Задайте background-color swiper-slide и данная проблема исчезнет, у Вас просто блоки прозрачные

▲ 0

Столкнулся с такой же проблемой. Решилось просто)

const swiper = new Swiper('.swiper', {
    loop: true,
    spaceBetween: 200,
    effect: 'cube',
    cubeEffect: {
        shadow: false,
        slideShadows: false,
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});
.swiper {
  width: 600px;
  height: 300px;
}
.swiper-slide {
    opacity: 0 !important;
}
.swiper-slide-active {
    opacity: 1 !important;
}
.swiper-slide p {
  color: #000;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
       Unde consequuntur, ex itaque eos amet nobis perspiciatis aliquid quod? 
       Dignissimos sed nesciunt non cumque, iusto itaque commodi a eos odio culpa.</p>
    </div>
    <div class="swiper-slide">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
       Unde consequuntur, ex itaque eos amet nobis perspiciatis aliquid quod? 
       Dignissimos sed nesciunt non cumque, iusto itaque commodi a eos odio culpa.</p></div>
    <div class="swiper-slide">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
       Unde consequuntur, ex itaque eos amet nobis perspiciatis aliquid quod? 
       Dignissimos sed nesciunt non cumque, iusto itaque commodi a eos odio culpa.</p></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>