сделал уникальные swiper-reviews-img

fitness
Kirill Pet 8 months ago
parent 29021ee1e5
commit ae087de19f
  1. 15
      assets/js/main.js
  2. 92
      index.html

@ -40,11 +40,13 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
}
})
let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
let swiperReviews = document.querySelectorAll('.swiper-reviews-img');
let reviewsSwiperImgs = {};
swiperReviews.forEach((review, index) => {
let newClass = `swiper-reviews-img-${index}`;
review.classList.add(newClass);
reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, {
pagination: {
el: ".swiper-pagination",
clickable: true,
@ -53,6 +55,9 @@ let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
},
},
});
})
const projectsSwiper = new Swiper('.projects-swiper', {
direction: 'horizontal',

@ -837,7 +837,28 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="reviews__item swiper-slide">
@ -866,7 +887,28 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="reviews__item swiper-slide">
@ -895,7 +937,28 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="reviews__item swiper-slide">
@ -924,7 +987,28 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save