Всем привет! Делаю слайдер на JS, пытаюсь прописать его так, что при нажатии на изображение (стрелку вправо) слайдер переключался на следующий блок. Можно ли как-то установить, чтобы после ручного переключения по стрелке слайда пользователем радио кнопки тоже работали.
HTML, CSS, JS:
let slideIndex = 1;
showSlides(slideIndex);
let next = document.getElementById('next');
next.addEventListener("click", function() {
showSlides(slideIndex += 1);
makeTimer(); //Пересоздаем интервал если производится нажатие
});
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let slides = document.getElementsByClassName("slider__check");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
}
var timer = 0;
makeTimer(); //Создаем интервал
function makeTimer() {
clearInterval(timer) //Очистим интервал, это позволит прервать его работу и отменить перелистывание
timer = setInterval(function() {
slideIndex++;
showSlides(slideIndex);
}, 5000);
}
.jc-sb {
display: flex;
justify-content: space-between;
}
.m-r-13 {
margin-right: 13px;
}
.m-b-56 {
margin-bottom: 56px;
}
.m-l-35 {
margin-left: 35px;
}
.m-l-450 {
margin-left: 450px;
}
.tit3 {
font-family: Times;
font-size: 50px;
}
.txt1 {
font-family: Helvetica;
font-size: 18px;
color: #8E8E8E;
}
.border-l-slider {
border-left: 2px solid #DBCAB7;
padding-left: 25px;
}
/*----- [SLIDER] -----*/
.slider {
position: relative;
width: 700px;
}
.slider__check {
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden;
}
.slider__content {
display: none;
position: absolute;
top: 0;
left: 0;
}
.slider__label {
margin-top: 550px;
overflow: hidden;
display: inline-block;
width: 10px;
height: 10px;
background: #BFBFBF;
border-radius: 50%;
cursor: pointer;
}
.slider__check:checked+.slider__label+.slider__content {
display: block;
}
/* Current */
.slider__check:checked+.slider__label {
background: #DBCAB7;
}
.arrow {
width: 74%;
margin-top: 100%;
float: right;
cursor: pointer;
}
/*----- [BUTTON] -----*/
.btn1 {
background-color: #DBCAB7;
border: 0px solid;
padding: 17px 47.5px;
font-family: Times;
font-weight: 400;
font-size: 20px;
}
.btn1:hover {
background-color: #AFA192;
transition: .5s;
}
.btn1:active {
background-color: #fff;
border: 2px solid #DBCAB7;
transition: .1s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<main class="container">
<div class="row">
<div class="col-xxl jc-sb">
<div class="col-1"></div>
<div class="col-9 jc-sb">
<div class="col-7">
<div class="slider">
<!-- 1 -->
<input type="radio" name="slider__check" class="slider__check" id="slider__check-1" checked>
<label for="slider__check-1" class="m-l-450 m-r-13 slider__label"></label>
<div class="slider__content">
<h1 class="tit3 m-b-56">Правовая помощь по делам о банкротстве</h1>
<div class="m-l-35 border-l-slider m-b-56">
<p class="txt1">Привлекаем недобросовестных руководителей и акцинеров компании к субсидиарной ответственности</p>
<p class="txt1">Защищаем руководителей организаций от неправомерных исков о взыскании убытков</p>
<p class="txt1">Оспариваем сделки по специальным правилам Закона о банкротстве</p>
<p class="txt1">Обжаловываем действия арбитражных управляющих</p>
</div>
<button class="btn1">Заказать консультацию</button>
</div>
<!-- 2 -->
<input type="radio" name="slider__check" class="slider__check" id="slider__check-2">
<label for="slider__check-2" class="m-r-13 slider__label"></label>
<div class="slider__content">
<h1 class="tit3 m-b-56">Разрешение коммерческих споров</h1>
<div class="m-l-35 border-l-slider m-b-56">
<p class="txt1">Взыскиваем задолжности по спорам разной степени сложности</p>
<p class="txt1">Выстраиваем эффективную защиту от взыскания убытков и штрафных санкций</p>
<p class="txt1">Защищаем деловую репутацию в сфере предпринимательской и иной экономической деятельности</p>
<p class="txt1">Представляем интересы доверителей по спорам о взыскании неосновательного обогащения и о признании сделок недействительными </p>
</div>
<button class="btn1">Заказать консультацию</button>
</div>
<!-- 3 -->
<input type="radio" name="slider__check" class="slider__check" id="slider__check-3">
<label for="slider__check-3" class="m-r-13 slider__label"></label>
<div class="slider__content">
<h1 class="tit3 m-b-56">Абонентское юридическое обслуживание</h1>
<div class="m-l-35 border-l-slider m-b-56">
<p class="txt1">
Помогаем в разрешении широкого спектра вопросов в рамках текущей хозяйственной деятельности Компании: начиная от консультаций в различных областях права, заканчивая представлением интересов организации в судах и при проверках органов государственной власти
</p>
</div>
<button class="btn1">Заказать консультацию</button>
</div>
<!-- 4 -->
<input type="radio" name="slider__check" class="slider__check" id="slider__check-4">
<label for="slider__check-4" class="m-r-13 slider__label"></label>
<div class="slider__content">
<h1 class="tit3 m-b-56">Сопровождение сделок и консультации</h1>
<div class="m-l-35 border-l-slider m-b-56">
<p class="txt1">Осуществляем всестороннее сопровождение деятельности коммерческих компаний , некоммерческих организайций, представительств и дочерних фирм зарубежных компаний в России</p>
</div>
<button class="btn1">Заказать консультацию</button>
</div>
<!-- 5 -->
<input type="radio" name="slider__check" class="slider__check" id="slider__check-5">
<label for="slider__check-5" class="m-r-13 slider__label"></label>
<div class="slider__content">
<h1 class="tit3 m-b-56">Разрешение корпоративных конфликтов</h1>
<div class="m-l-35 border-l-slider m-b-56">
<p class="txt1">Разрешаем споры, связанные с принадлежностью акций, долей в уставном капитале, восстановлению корпоративного контроля</p>
<p class="txt1">Представляем интересы наших Доверителей по искам о возмещении убытков, причиненных юридическому лицу, а также о признании недействительными сделок, совершенных юридическим лицом</p>
<p class="txt1">Оспариваем незаконно принятые решения органов управления юридического лица, в том числе, связанных с назначением или избранием членов совета директоров или генерального директора организации</p>
</div>
<button class="btn1">Заказать консультацию</button>
</div>
<!-- 6 -->
<input type="radio" name="slider__check" class="slider__check" id="slider__check-6">
<label for="slider__check-6" class="m-r-13 slider__label"></label>
<div class="slider__content">
<h1 class="tit3 m-b-56">Разрешение споров c государственными органами</h1>
<div class="m-l-35 border-l-slider m-b-56">
<p class="txt1">Оспариваем в судебном порядке постановления о привлечении к административной ответственности, обжаловываем предписания, а также действия и бездействия должностных лиц</p>
<p class="txt1">Представляем интересы наших Доверителей в Федеральной антимонопольной службе, Федеральной налоговой службе, Росприроднадзоре, Россельхознадзоре, перед трудовыми инспекциями, органами по защите прав потребителей, службой судебных приставов,
прокуратурой и иными ведомствами</p>
</div>
<button class="btn1">Заказать консультацию</button>
</div>
<!-- 7 -->
<input type="radio" name="slider__check" class="slider__check" id="slider__check-7">
<label for="slider__check-7" class="slider__label"></label>
<div class="slider__content">
<h1 class="tit3 m-b-56">Защита прав частных клиентов</h1>
<div class="m-l-35 border-l-slider m-b-56">
<p class="txt1">Защищаем права и законные интересы Клиентов по их частным вопросам</p>
<p class="txt1">Осуществляем консультирование по вопросам семейного и наследственного права</p>
<p class="txt1">Помогаем в защите репутации и вопросах налогообложения</p>
<p class="txt1">Защищаем частный капитал от незаконных попыток его завладения и помогаем в сопровождении сделок</p>
<p class="txt1">Разъясняем сложные вопросы, связанные с доверительным управлением имущества</p>
</div>
<button class="btn1">Заказать консультацию</button>
</div>
</div>
</div>
<div class="col-2">
<a id="next"><img class="arrow" src="img/ico/arrow.png" alt="arrow"></a>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</main>
З.Ы. в js неправильно написал... скорее всего там ошибка.