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

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

Browse Source
fitness
Kirill Pet 8 months ago
parent 29021ee1e5
commit ae087de19f
2 changed files with 105 additions and 16 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 29
      assets/js/main.js
  2. 92
      index.html

29
assets/js/main.js
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save