0

Есть самый простой слайдер, для него нужно сделать стандартную навигацию из списка точек. У меня получилось сделать динамически создаваемый список по числу слайдов, но как связать каждый слайд с соответствующей точкой? Эти 2 класса active-slide и active-dot?

`<ul class="slider">
 <li class="slide active-slide"><img></li>
 <li class="slide"><img></li>
 <li class="slide"><img></li>
 <li class="slide"><img></li>
 <li class="slide"><img></li>
 </ul>
 <ul class="navigation-slider">
 <li class="slide-dot active-dot"></li>
 <li class="slide-dot"></li>
 <li class="slide-dot"></li>
 <li class="slide-dot"></li>
 <li class="slide-dot"></li>
 </ul>`

1 ответ 1

1

Не знаю, как именно работает Ваш слайдер, но вот самый простой (без js) вариант навигации со стилизованными label для radiobutton:

.wrapper {
  width: 400px;
  text-align: center;
  
}
.slider {
  width: 400px;
  height: 265px;
  border-radius: 15px;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 10px;
}
input {
  display: none;
}
label {
  display: inline-block;
  margin: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: gray;
  cursor: pointer;
  transition: .5s;
  position: relative;
  top: 275px;
}
label:hover {
  background-color: red;
}

#first:checked ~ .slider {
  background-image: url('https://avatars.mds.yandex.net/get-pdb/51720/de28bef6-58b1-430c-b03e-e890e855126e/s1200');
}
#first:checked ~ [for="first"] {
  background-color: red;
}

#second:checked ~ .slider {
  background-image: url('https://avatars.mds.yandex.net/get-pdb/49816/024ed5ae-19f3-45ea-9128-4bd9e999dec7/s1200');
}
#second:checked ~ [for="second"] {
  background-color: red;
}

#third:checked ~ .slider {
  background-image: url('https://avatars.mds.yandex.net/get-pdb/406349/95feed9f-e0f7-4d5b-99b5-98c50a6b1b3f/s1200');
}
#third:checked ~ [for="third"] {
  background-color: red;
}

#fourth:checked ~ .slider {
  background-image: url('https://avatars.mds.yandex.net/get-pdb/879261/468176f9-d732-4c61-a77e-63537ecbb07c/s1200');
}
#fourth:checked ~ [for="fourth"] {
  background-color: red;
}
<div class="wrapper">
  <input type="radio" name="slide-dot" id="first" checked />
  <label for="first"></label>

  <input type="radio" name="slide-dot" id="second" />
  <label for="second"></label>

  <input type="radio" name="slide-dot" id="third" />
  <label for="third"></label>

  <input type="radio" name="slide-dot" id="fourth" />
  <label for="fourth"></label>

  <div class="slider"></div>
</div>

Ваш ответ

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

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