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-20 17:00:34 +03:00
parent 81faffc0a1
commit 74fb21358e
4 changed files with 80 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/gp-style-desktop.css
View File

@@ -859,6 +859,26 @@
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{
position: absolute;
right: 32px;

20
assets/css/gp-style-tablet.css
View File

@@ -665,6 +665,26 @@ main{
height: 300px;
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{
bottom: 87px;

18
assets/js/main.js
View File

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

24
index.html
View File

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