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;

252
index.html
View File

@@ -787,127 +787,147 @@
</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="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
<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>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
</div>
<div class="reviews__counter">
<div class="swiper-button-prev"></div>