Переключение слайдов на JS
Всем привет! Делаю слайдер на 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 неправильно написал... скорее всего там ошибка.
Ответы (2 шт):
Задачку на операции разбейте.
Сбросить таймер, Обновить активный слайд, Листать влево, Листать вправо,
См. комментарии по коду ниже.
let slideIndex = 0;
let timer = 0;
let next = document.getElementById('next');
const slides = document.getElementsByClassName("slider__check") //все радио слайдов
//общая ф-я обновления активного слайда
function updateActiveSlide(n) {
makeTimer();
slideIndex = checkIndex(n)
slides[slideIndex].checked = true
}
//зацикливание индексов
function checkIndex(n) {
if (n >= slides.length) {
return 0;
}
if (n < 0) {
return slides.length - 1
}
return n
}
//листаем вправо
function nextSlide () {
updateActiveSlide(slideIndex + 1)
}
//листаем влево
function prevSlide () {
updateActiveSlide(slideIndex - 1)
}
//обновляем интервал
function makeTimer() {
clearInterval(timer)
timer = setInterval(function() {
nextSlide() //просто листаем вправо
}, 2000);
}
//вешаем обработчики событий
//клики по радиокнопкам
Array.from(slides).forEach((current, index)=>{
current.onclick = () => {
updateActiveSlide(index)
}
})
//кнопки лево/право
document.querySelector('.right').onclick = nextSlide //листать вправо
document.querySelector('.left').onclick = prevSlide //листать влево
//запускаем листаение
updateActiveSlide(slideIndex);
.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>
<button class="btn btn-primary left">left</button>
<button class="btn btn-primary right">right</button>
У вас слайд отображается для выбранного radio. Функция showSlides() производит контроль переменной slideIndex, но не "чекает" нужный слайд.
Просто добавьте в конец функции slides[slideIndex].checked = true:
function showSlides(n) {
let slides = document.getElementsByClassName("slider__check");
if (n > slides.length - 1) {
slideIndex = 0;
} else if (n < 0) {
slideIndex = slides.length - 1;
}
slides[slideIndex].checked = true;
}
Так как количество слайдов не меняется в динамике, слайды можно получить один раз вне функции.