сделал уникальные swiper-reviews-img
This commit is contained in:
Kirill Pet
@@ -40,19 +40,24 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
|
let swiperReviews = document.querySelectorAll('.swiper-reviews-img');
|
||||||
autoplay: {
|
let reviewsSwiperImgs = {};
|
||||||
delay: 2500,
|
swiperReviews.forEach((review, index) => {
|
||||||
disableOnInteraction: false,
|
let newClass = `swiper-reviews-img-${index}`;
|
||||||
},
|
review.classList.add(newClass);
|
||||||
pagination: {
|
|
||||||
el: ".swiper-pagination",
|
reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, {
|
||||||
clickable: true,
|
pagination: {
|
||||||
renderBullet: function (index, className) {
|
el: ".swiper-pagination",
|
||||||
return '<span class="' + className + '">' + "</span>";
|
clickable: true,
|
||||||
|
renderBullet: function (index, className) {
|
||||||
|
return '<span class="' + className + '">' + "</span>";
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
});
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const projectsSwiper = new Swiper('.projects-swiper', {
|
const projectsSwiper = new Swiper('.projects-swiper', {
|
||||||
direction: 'horizontal',
|
direction: 'horizontal',
|
||||||
|
|||||||
92
index.html
92
index.html
@@ -837,7 +837,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<div class="reviews__item swiper-slide">
|
<div class="reviews__item swiper-slide">
|
||||||
@@ -866,7 +887,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<div class="reviews__item swiper-slide">
|
<div class="reviews__item swiper-slide">
|
||||||
@@ -895,7 +937,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<div class="reviews__item swiper-slide">
|
<div class="reviews__item swiper-slide">
|
||||||
@@ -924,7 +987,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user