сделал swiper-reviews-img

fitness
Kirill Pet 8 months ago
parent 81faffc0a1
commit 74fb21358e
  1. 20
      assets/css/gp-style-desktop.css
  2. 20
      assets/css/gp-style-tablet.css
  3. 18
      assets/js/main.js
  4. 24
      index.html

@ -859,6 +859,26 @@
flex-shrink: 0; flex-shrink: 0;
} }
.reviews-item__img-block{
margin-left: 164px;
width: 577px;
height: 600px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
position: relative;
}
.reviews .reviews-item__img-block .swiper-pagination{
bottom: 16px;
padding-right: 0px;
text-align: center;
}
.reviews .swiper-pagination{ .reviews .swiper-pagination{
position: absolute; position: absolute;
right: 32px; right: 32px;

@ -665,6 +665,26 @@ main{
height: 300px; height: 300px;
width: 100%; width: 100%;
} }
.reviews-item__img-block{
margin-top: 24px;
margin-left: 0;
height: 300px;
width: 100%;
}
.swiper-reviews-img{
height: 100%;
}
.reviews-item__img-block .swiper-slide{
width: 100%;
height: 100%;
}
.reviews-item__img-block .swiper-slide img{
width: 100%;
height: 100%;
object-fit: cover;
}
.reviews .swiper-pagination{ .reviews .swiper-pagination{
bottom: 87px; bottom: 87px;

@ -40,6 +40,20 @@ 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>";
},
},
});
const projectsSwiper = new Swiper('.projects-swiper', { const projectsSwiper = new Swiper('.projects-swiper', {
direction: 'horizontal', direction: 'horizontal',
breakpoints: { breakpoints: {
@ -284,6 +298,8 @@ phoneInputs.forEach(phoneInput => {
}); });
}) })
// masks end
// pc menu // pc menu
let blocksMenu = document.querySelectorAll('.header-menu-list-next__block'); let blocksMenu = document.querySelectorAll('.header-menu-list-next__block');
@ -332,6 +348,8 @@ blocksMenu.forEach(block =>{
}) })
// pc menu end
// resize // resize
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
let screenWidth = window.screen.width; let screenWidth = window.screen.width;

@ -787,7 +787,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">
@ -907,7 +928,6 @@
</div> </div>
</div> </div>
<div class="swiper-pagination"></div>
<div class="reviews__counter"> <div class="reviews__counter">
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>

Loading…
Cancel
Save