Навигация Свайпера

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

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

const swiper = new Swiper('.swiper', {
spaceBetween: 26,
slidesPerView: 3,
autoplay: {
  delay: 2000,
  stopOnLastSlide: true,
  disableOnInteraction: false
},
speed: 700,
breakpoints: {
  260: {
    slidesPerView: 1
  },
  769: {
    slidesPerView: 2
  },
  1200: {
    slidesPerView: 3
  }
},
// Navigation arrows
navigation: {
  nextEl: '#nav-right',
  prevEl: '#nav-left',
  clickable: true,
},
});

})
.swiper {
  max-width: 1400px;
  text-align: center;
  width: 100%;
}

.image__girl img {
  max-width: 100%;
}

.about__images {
  position: relative;
}

.slider__controls {
  position: absolute;
  top: 53%;
  width: 100%;
  display: none;
  justify-content: space-between;
  padding: 0 57px;
  box-sizing: border-box;
}

.slider__prev-button,
.slider__next-button {
  background-color: rgba($color: var(--fourth-color), $alpha: 1.0);
  border: none;
  cursor: pointer;
  background: rgb(145, 145, 145);
  border-radius: 100%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="about__images image swiper">
  <div class="slider__controls">
    <button class="slider__prev-button slider-prev-button" aria-label="Previous Slide">
                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" id="nav-left">
                                <path d="M15 7.5L9 12.5L15 17.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
    <button class="slider__next-button slider-next-button" aria-label="Next Slide">
                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" id="nav-right">
                                <path d="M9 17.5L15 12.5L9 7.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>            
                        </button>
  </div>
  <div class="slider__wrapper swiper-wrapper">
    <div class="image__girl swiper-slide">
      <img src="./images/girl.png" alt="girl in the library">
    </div>
    <div class="image__girl second__hidden swiper-slide">
      <img src="./images/philosophers.png" alt="philosophers">
    </div>
    <div class="image__girl first__hidden swiper-slide">
      <img src="./images/library1.png" alt="library">
    </div>
    <div class="image__girl swiper-slide">
      <img src="./images/library2.png" alt="library">
    </div>
    <div class="image__girl swiper-slide">
      <img src="./images/museum.png" alt="building">
    </div>
  </div>
</div>

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

Ответы

▲ 0

Вот правильный код, просто забыл про домКонтентЛоадед. А чтобы убрать стрелки стандартные и подставить свои, чтобы оно все работало помогли строки -

.slider__controls .swiper-button-next::after,
.slider__controls .swiper-button-prev::after{
content: '';
}.

И еще, я долго тоже не мог понять почему не работает навигация и причиной было то, что на родителя навесил transform: translate, почему-то с ним не работает свайпер.

   const swiper = new Swiper('.swiper', {
    spaceBetween: 26,
    slidesPerView: 3,
    autoplay:{
        delay: 2000,
        stopOnLastSlide: true,
        disableOnInteraction: false
    },
    speed: 700,
    breakpoints:{
        260: {
            slidesPerView: 1
        },
        769: {
            slidesPerView: 2
        },
        1200:{
            slidesPerView: 3
        }
    },
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      clickable: true,
    },
  });
    .swiper{
    max-width: 1400px;
    text-align: center;
    width: 100%;
}

.image__girl img{
    max-width: 100%;
}

.about__images{
    position: relative;
}

.slider__controls {
    position: absolute;
    top: 53%;
    left: 6%;
    width: 88%;
    display: none;
    justify-content: space-between;
    padding: 0 57px;
    box-sizing: border-box;
  }

.slider__prev-button,
.slider__next-button {
  background-color: rgba($color: var(--fourth-color), $alpha: 1.0);
  border: none;
  cursor: pointer;
  background:rgb(145,145,145);
  border-radius:100%;
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.slider__controls .swiper-button-next::after,
.slider__controls .swiper-button-prev::after{
    content: '';
}     

.btn__reset{
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper- 
bundle.min.css"/>

<div class="about__images image swiper">
  <div class="slider__controls">
                    <button class="  btn__reset swiper-button-next" aria- 
 label="Previous Slide">
                        <svg width="24" height="25" viewBox="0 0 24 25" 
  fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 17.5L15 12.5L9 7.5" stroke="black" 
stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <button class=" btn__reset swiper-button-prev" aria- 
   label="Next Slide">
                        <svg width="24" height="25" viewBox="0 0 24 25" 
fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 7.5L9 12.5L15 17.5" stroke="black" 
stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
  <div class="slider__wrapper swiper-wrapper">
    <div class="image__girl swiper-slide">
                        <img src="https://i.postimg.cc/6757j0Xc/book-5.jpg" 
alt="girl in the library">
                    </div>
                    <div class="image__girl second__hidden swiper-slide">
                        <img src="https://i.postimg.cc/pmv58vcg/book-6.jpg" 
alt="philosophers">
                    </div>
                    <div class="image__girl first__hidden swiper-slide">
                         <img src="https://i.postimg.cc/HVX7Vnzw/book-8.jpg" 
alt="building">
                    </div>
                    <div class="image__girl swiper-slide">
                        <img src="https://i.postimg.cc/tszZNcL7/book-7.jpg" 
alt="library">
                    </div>
                    <div class="image__girl swiper-slide">
                        <img src="https://i.postimg.cc/HVX7Vnzw/book-8.jpg" 
alt="building">
                    </div>
  </div>
 </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"> 
</script>