По клику на кнопку далее должно переключаться на следующий блок и появляться кнопка назад. Как остановить переключение если блоков нет больше? В одну и другую сторону. И если по клику назад дошли до начала скрыть кнопку. (Если можно на JS это переделать)
$('.popup__btn_next').click(function(e) {
let $current = $('.popup__tab._active');
let $current2 = $('.popup__slot._active');
$(this).siblings('.popup__btn_prev').show();
$current.removeClass('_active');
$current.next('.popup__tab').addClass('_active');
$current2.next('.popup__slot').addClass('_active');
});
$('.popup__btn_prev').click(function(e) {
let $current = $('.popup__tab._active');
let $current2 = $('.popup__slot._active');
$current.removeClass('_active');
$current2.removeClass('_active');
$current.prev('.popup__tab').addClass('_active');
$current2.prev('.popup__slot').addClass('_active');
})
.popup {
max-width: 969px;
width: 100%;
}
.popup__tabs-body {
margin: 0 0 128px;
}
.popup__tab {
display: none;
}
.popup__tab._active {
display: block;
}
.popup__title {
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 30px;
line-height: 36px;
color: #0063b9;
margin: 0 0 35px;
}
.popup__inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.popup__inner label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 253px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid transparent;
border-radius: 10px;
cursor: pointer;
z-index: 1;
transition: all 0.4s ease 0s;
}
@media (any-hover: hover) {
.popup__inner label:hover {
filter: drop-shadow(0 0 5px rgba(0, 46, 166, 0.33));
border-color: rgba(0, 46, 166, 0.33);
}
}
.popup__inner label span {
position: absolute;
top: 100%;
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: 22px;
line-height: 27px;
text-align: center;
color: #1e1e1e;
}
.popup__inner .popup__item_one label {
background: #d8d8d8;
}
.popup__inner .popup__item_two label {
background: #d8d8d8;
}
.popup__inner .popup__item_three label {
background: #d8d8d8;
}
.popup__inner input[type=radio] {
display: none;
}
.popup__inner input[type=radio]:checked~label {
border-color: #002ea6;
box-shadow: inset 0 0 34px 8px rgba(0, 0, 0, 0.15);
scale: 1.1;
}
.popup__inner._inner-two .popup__item,
.popup__inner._inner-three .popup__item,
.popup__inner._inner-four .popup__item {
height: fit-content;
}
.popup__inner._inner-two label,
.popup__inner._inner-three label,
.popup__inner._inner-four label {
height: max-content;
align-items: flex-start;
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: 22px;
color: #1E1E1E;
background: #D8D8D8;
padding: 22px;
}
.popup__item {
position: relative;
max-width: 253px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 263px;
}
.popup__buttons {
display: flex;
align-items: center;
gap: 20px;
margin: 0 0 41px;
}
.popup__btn_prev {
display: none;
--b: 1px;
/* border width*/
--r: 7px;
/* the radius */
position: relative;
font-weight: 500;
border: 1px solid transparent;
color: rgba(27, 27, 27, 0.5);
}
.popup__btn_prev:before {
position: absolute;
content: "";
inset: 0;
border-radius: var(--r);
background: var(--c, linear-gradient(180deg, #0083c4 0%, #0033a7 100%));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: var(--b);
z-index: -1;
}
@media (any-hover: hover) {
.popup__btn_prev:hover {
color: #0033a7;
}
}
.popup__btn_next {
font-weight: 700;
box-shadow: 0 4px 4px #000000;
color: #ffffff;
background: linear-gradient(180deg, #0088c7 0%, #002ea6 100%);
}
@media (any-hover: hover) {
.popup__btn_next:hover {
box-shadow: 0 1px 1px #000000;
}
}
.popup__progress {
display: flex;
align-items: center;
gap: 15px;
}
.popup__slot {
width: 100%;
height: 6px;
border-radius: 3px;
background: #cbcbcb;
}
.popup__slot._active {
background: #003eb6;
}
.btn {
width: 251px;
height: 104px;
font-size: 33px;
border-radius: 7px;
transition: all 0.4s ease 0s;
}
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
<div class="popup__tabs" id="tabs">
<div class="popup__tabs-body">
<div class="popup__tab _active">
<h2 class="popup__title">Какая ?</h2>
<ul class="popup__inner _inner-one">
<li class="popup__item popup__item_one"><input class="input" id="r1" type="radio" name="teeth" value="1"><label for="r1"><span>Нет </span></label></li>
<li class="popup__item popup__item_two"><input class="input" id="r2" type="radio" name="teeth" value="2"><label for="r2"><span>Нет почти </span></label></li>
<li class="popup__item popup__item_three"><input class="input" id="r3" type="radio" name="teeth" value="3"><label for="r3"><span>Нет всех </span></label></li>
</ul>
</div>
<div class="popup__tab">
<h2 class="popup__title">На </h2>
<ul class="popup__inner _inner-two">
<li class="popup__item"><input id="r4" type="radio" name="jaws"><label for="r4">На верхней</label></li>
<li class="popup__item"><input id="r5" type="radio" name="jaws"><label for="r5">На нижней</label></li>
<li class="popup__item"><input id="r6" type="radio" name="jaws"><label for="r6">На обеих</label></li>
</ul>
</div>
<div class="popup__tab">
<h2 class="popup__title">Как </h2>
<ul class="popup__inner _inner-three">
<li class="popup__item"><input id="r7" type="radio" name="how long"><label for="r7">Менее</label></li>
<li class="popup__item"><input id="r8" type="radio" name="how long"><label for="r8">Полгода</label></li>
<li class="popup__item"><input id="r9" type="radio" name="how long"><label for="r9">Сложно</label></li>
</ul>
</div>
<div class="popup__tab">
<h2 class="popup__title">Когда</h2>
<ul class="popup__inner _inner-four">
<li class="popup__item"><input id="r10" type="radio" name="planning"><label for="r10">Как</label></li>
<li class="popup__item"><input id="r11" type="radio" name="planning"><label for="r11">В</label></li>
<li class="popup__item"><input id="r12" type="radio" name="planning"><label for="r12">Сложно</label></li>
</ul>
</div>
</div>
<div class="popup__buttons" id="buttons"><button class="popup__btn btn popup__btn_prev" id="prev" type="button">Назад</button><button class="popup__btn btn popup__btn_next" id="next" type="button">Далее</button></div>
<ul class="popup__progress" id="progress">
<li class="popup__slot _active"></li>
<li class="popup__slot"></li>
<li class="popup__slot"></li>
<li class="popup__slot"></li>
</ul>
</div>
</div>