Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kirill Pet
2024-12-21 16:18:59 +03:00
parent 29021ee1e5
commit ae087de19f
2 changed files with 105 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
assets/js/main.js
View File

@@ -40,19 +40,24 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
}
})
let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + "</span>";
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,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + "</span>";
},
},
},
});
});
})
const projectsSwiper = new Swiper('.projects-swiper', {
direction: 'horizontal',

92
index.html
View File

@@ -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>