0

Всем привет! Делаю слайдер на 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 ответа 2

1

Задачку на операции разбейте.

Сбросить таймер, Обновить активный слайд, Листать влево, Листать вправо,

См. комментарии по коду ниже.

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>

2
  • Спасибо большое!
    – Ledgor
    30 июн 2022 в 13:55
  • @Роберт Рекомендую Вам принять именно этот ответ, так как он в полной мере решает вашу задачу. 30 июн 2022 в 14:20
0

У вас слайд отображается для выбранного 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;
}

Так как количество слайдов не меняется в динамике, слайды можно получить один раз вне функции.

2
  • 1. нумерация массивов начинается с 0 и заканчивается на arr.length - 1. 2. Дополните ответ, т.к. после каждой операции переключения слайдера необходимо обнулять таймер.
    – xydope
    30 июн 2022 в 14:06
  • @xydope, Да, спасибо. Копировал код автора вопроса и не обратил внимание. Я бы рекомендовал автору принять Ваш ответ, поскольку он решает все его проблемы, а не только одну, о которой я сказал выше. Так, при выборе слайда радио кнопками будет рассинхронизация. 30 июн 2022 в 14:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.