0

Добавил слайдер-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>

4
  • Ну для начала стоит убрать абсолютное позиционирование.
    – ΝNL993
    6 июн в 14:04
  • Абсолютное позиционирование стоит у элемента который вообще к слайдеру не относится, а к кнопкам переключения слайдов. Но даже если закомментировать это - бесполезно, я вообще сносил весь CSS-код, это тоже не помогло..
    – Ismail N9
    6 июн в 14:06
  • Очень странно поведение у вашего слайдера конечно, назад можно листать спокойно, а вот вперёд нет.
    – ΝNL993
    6 июн в 14:21
  • Согласен, есть такое..
    – Ismail N9
    6 июн в 14:22

1 ответ 1

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>

1
  • 1
    Благодарю вас за ответ, но уже решил проблему тем же способом (ну, opacity в css через !important добавил). Почему-то не хотел слайдер сам применять opacity, странно.. в любом случае, напишу репорт и там всё порешают)
    – Ismail N9
    7 июн в 5:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.