доработать слайдер
const allCards = document.querySelectorAll('.price-services__cards');
const parantCard = document.querySelector('.price-services__container');
const nextBtn = document.querySelector('.price-services-right');
const prevBtn = document.querySelector('.price-services-left');
cardsLength = allCards.length;
let currentSlide = 1;
const moveSlide = function () {
allCards.forEach((cards, index) => {
const offset = index - currentSlide;
cards.classList.toggle('slide-active', Math.abs(offset) < 1);
cards.style.transition = '.7s ease';
if (currentSlide <= cardsLength / 2) {
allCards[0].classList.remove('price-services__cards_first');
allCards[cardsLength - 1].classList.add(
'price-services__cards_last'
);
} else {
//Если скролл вперёд, то первому элементу добавляется класс
allCards[cardsLength - 1].classList.remove(
'price-services__cards_last'
);
allCards[0].classList.add('price-services__cards_first');
}
});
parantCard.style.transform = `translateX(${-currentSlide * 383}px)`;
parantCard.style.transition = '.7s ease';
console.log(parantCard);
};
// moveSlide(currentSlide);
nextBtn.addEventListener('click', function () {
currentSlide = (currentSlide + 1) % cardsLength;
moveSlide();
});
prevBtn.addEventListener('click', function () {
currentSlide = (currentSlide - 1 + cardsLength) % cardsLength;
moveSlide();
});
moveSlide();.price-services {
padding-top: 150px;
margin: 0 auto;
&__main-container {
width: 1160px;
height: 454px;
overflow: hidden;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 890px;
height: 415px;
border-radius: 890px;
background: radial-gradient(
43.25% 43.25% at 50% 50%,
rgba(118, 0, 173, 0.4) 0%,
rgba(24, 24, 24, 0.4) 100%
);
}
}
// .price-services__container
&__container {
display: flex;
position: relative;
width: 1190px;
gap: 78px;
padding-top: 34px;
margin-bottom: 78px;
margin-left: 428px;
//
}
// .price-services__cards
&__cards {
border-radius: 30px;
border: 3px solid $main-color;
flex: 0 0 305px;
height: 337px;
padding: 48px 19px;
z-index: 1;
//
}
// .price-services__cards-header
&__cards-header {
font-size: 1.5rem;
font-weight: 500;
line-height: 122%;
text-align: center;
margin-bottom: 25px;
}
// .price-services__cards-text
&__cards-text {
text-align: center;
font-family: $second-font;
font-size: 1rem;
line-height: 130%;
margin-bottom: 25px;
}
// .price-services__cards-price
&__cards-price {
font-size: 1.5rem;
font-weight: 400;
line-height: 122%;
text-align: center;
margin-bottom: 25px;
}
// .price-services__cards-button
&__cards-button {
display: block;
padding: 12px 55px;
border-radius: 10px;
background: $main-color;
font-size: 1.125rem;
font-weight: 400;
line-height: 122%;
margin: 0 auto;
}
}
// .title-cards {
// margin-bottom: 86px;
// }
.slide-active {
transform: scale(1.2);
overflow: hidden;
// transition: 0.7s ease;
}
//
.price-services__cards_first {
transform: translateX(2681px);
}
.price-services__cards_last {
transform: translateX(-2681px);
}<section class="price-services">
<div class="container">
<h2 class="title title-cards">УСЛУГИ И СТОИМОСТЬ</h2>
<div class="price-services__main-container">
<div class="price-services__container">
<!-- first card -->
<div
class="price-services__cards price-services__cards_first"
>
<h3 class="price-services__cards-header">
МНОГОСТРАНИЧНЫЙ <br />САЙТ
</h3>
<p class="price-services__cards-text">
Состоит из нескольких
<br />страниц.Переключаться <br />можно в
пунктах меню.
</p>
<p class="price-services__cards-price">
20 000 рублей
</p>
<button
type="submit"
class="price-services__cards-button"
>
ЗАКАЗАТЬ
</button>
</div>
<!-- second card -->
<div class="price-services__cards slide-active">
<h3 class="price-services__cards-header">
ЛЕНДИНГ
</h3>
<p class="price-services__cards-text">
Это посадочная страница с действиями
(зарегистрироваться, купить)
</p>
<p class="price-services__cards-price">
6 000 рублей
</p>
<button
type="submit"
class="price-services__cards-button"
>
ЗАКАЗАТЬ
</button>
</div>
<!-- third card -->
<div class="price-services__cards">
<h3 class="price-services__cards-header">
ИНТЕРНЕТ-МАГАЗИН
</h3>
<p class="price-services__cards-text">
Может состоять из одной или нескольких страниц.
Создан для продаж
</p>
<p class="price-services__cards-price">
25 000 рублей
</p>
<button
type="submit"
class="price-services__cards-button"
>
ЗАКАЗАТЬ
</button>
</div>
<!-- fourth card -->
<div class="price-services__cards">
<h3 class="price-services__cards-header">
ЛОГОТИПЫ
</h3>
<p class="price-services__cards-text">
Нужен для любого бренда после ознакомления
предлагаю
<br />3 варианта на выбор
</p>
<p class="price-services__cards-price">
2 000 рублей
</p>
<button
type="submit"
class="price-services__cards-button"
>
ЗАКАЗАТЬ
</button>
</div>
<!-- fifth card -->
<div class="price-services__cards">
<h3 class="price-services__cards-header">
ПОЛИГРАФИЯ
</h3>
<p class="price-services__cards-text">
Презентации, визитки, чек-<br />листы,
меню,вывески, <br />листовки и др.
</p>
<p class="price-services__cards-price">
3 000 рублей
</p>
<button
type="submit"
class="price-services__cards-button"
>
ЗАКАЗАТЬ
</button>
</div>
<!-- sixth card -->
<div class="price-services__cards">
<h3 class="price-services__cards-header">
РЕКЛАМНЫЕ МАКЕТЫ
</h3>
<p class="price-services__cards-text">
Цифровая реклама, карточки для маркетплейсов,
любая рекламная продукция
</p>
<p class="price-services__cards-price">
от 4 000 рублей
</p>
<button
type="submit"
class="price-services__cards-button"
>
ЗАКАЗАТЬ
</button>
</div>
<!-- seventh card -->
<div class="price-services__cards">
<h3 class="price-services__cards-header">
ДИЗАЙН ПОД КЛЮЧ
</h3>
<p class="price-services__cards-text">
Полный дизайн вашего <br />бизнеса. От логотипа
и <br />листовки до сайта
</p>
<p class="price-services__cards-price">
50 000 рублей
</p>
<button
type="submit"
class="price-services__cards-button"
>
ЗАКАЗАТЬ
</button>
</div>
</div>
</div>
<div class="portfolio__arrows">
<button
type="submit"
class="portfolio__arrow-left price-services-left"
></button>
<button
type="submit"
class="portfolio__arrow-right price-services-right"
></button>
</div>
</div>
</section>Источник: Stack Overflow на русском