0

Делаю слайдер на css впервые. Слайдер написан на чистом HTML и CSS. Если логику переключения самих слайдов я понял, но каким обоазом подключить стрелки влево и вправо не могу понять. Потратил уже пару часов на поиск решения в гугле. Но в основном используется js. А мне нужно все сделать на чистом CSS. Я так понял, стреки должны каким-то обазом переключать label-ы по очереди. Подскажите, каким образом, можно подключить стрелки?

Вот jsfiddle

https://jsfiddle.net/Nikita_Migushev/4ufge6L5/8/

.slideshow { /*Set the dimensions of slideshow box. This is a window wehre slides are shown*/
  width: 700px;
  height: 400px;
  overflow: hidden; /*Hide everything that is outside the main slideshow box. We need that in order to see what is in currently in "slideshow" container*/

  /*Center the slideshow box*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*Position navigation box*/
.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;

}

/*Shape navigation buttons into radios*/
.bar {
  width: 10px;
  border-radius: 30px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;

}

.bar:hover {
  background: #fff;

}

/*Hide original html radios*/
input[name="r"] {
position: absolute;
visibility: hidden;
}


/*Resize "slides" container into 500% - which is 5 images 100% each. Slides container is the box that containis all images. And make images in one line by flex.*/
.slides {
  width: 500%;
  height: 100%;
  display: flex;

}

/*Make each slide's size 20%. Which is 1/5 of "slides" container where each slide is in, since there are 5 images used.*/

.slide {
  width: 20%;
  transition: 0.3s;
}

/*Make each actual image 100% of size of "slide" container. Since images are in .slide container*/

.slide img {
  width: 100%;
  height: 100%;
}

/*Now when certain radio botton is checked move the first image to the left by certain degree, so that next images is shown in the "slideshow" container.*/

#r1:checked ~ .s1 {
  margin-left: 0;
}
#r2:checked ~ .s1 {
  margin-left: -20%;
}
#r3:checked ~ .s1 {
  margin-left: -40%;
}
#r4:checked ~ .s1 {
  margin-left: -60%;
}
#r5:checked ~ .s1 {
  margin-left: -80%;
}


/*Arrows*/

div.arrow-left {
  display: block;
  width: 50px;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

div.arrow-right {
    display: block;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
<div class="slideshow">

    <div class="slides">

      <input type="radio" name="r" id="r1" checked>
      <input type="radio" name="r" id="r2">
      <input type="radio" name="r" id="r3">
      <input type="radio" name="r" id="r4">
      <input type="radio" name="r" id="r5">

      <div class="slide s1"><img src="img/1.jpg" alt=""></div>
      <div class="slide"><img src="img/2.jpg" alt=""></div>
      <div class="slide"><img src="img/3.jpg" alt=""></div>
      <div class="slide"><img src="img/4.jpg" alt=""></div>
      <div class="slide"><img src="img/5.jpg" alt=""></div>

    </div>

    <div class="navigation">

      <label for="r1" class="bar"></label>
      <label for="r2" class="bar"></label>
      <label for="r3" class="bar"></label>
      <label for="r4" class="bar"></label>
      <label for="r5" class="bar"></label>

    </div>

<div class="arrow-left">
<img src="img/left.svg" alt="" >
</div>

<div class="arrow-right">
<img src="img/right.svg" alt="" >
</div>

  </div>

Там самих стрелок нет, так как не разобрался, как быстро их вставить внешними ссылками, но выглядеть должно примерно вот так:

введите сюда описание изображения

1 ответ 1

2

Стрелки не должны переключать label'ы. Стрелки сами должны быть label'ами. Т.к. смена изображения происходит через чек input'ов. А label'ы есть, грубо говоря, ссылки на input'ы.

Получилось только в каждый слайд вложить по стрелке, так можно явно указать на какой слайд менять при нажатии. Динамически менять for у label без js не знаю как.

https://jsfiddle.net/skywave/506tu2wy/16/

<div class="slide">
      <img src="https://pixabay.com/get/57e8d7414c51aa14f6d1867dda6d49214b6ac3e45654794972267ad092/elephant-1822636_1920.jpg" alt=""/>
      <label for="r1" class="arrow left">&lt;</label>
      <label for="r3" class="arrow right">&gt;</label>
</div>
8
  • Понял. Спасибо! А еще подскажите, как сделать, чтобы в навигации нижней (radio buttons) обнозначался текущий слайд заливкой соответствующего radio? 17 мая 2019 в 8:37
  • 1
    @NikitaMigushev, Надо копать в сторону смежных селекторов, наподобие того как у вас сделана смена слайдеров #r1:checked ~ .s1
    – Skywave
    17 мая 2019 в 9:09
  • Ок, спасибо за помощь! 17 мая 2019 в 9:24
  • Пробую вот так, но что-то не выходит. В чем проблема, не подскажите? #r1:checked ~ .navigation:nth-child(1) { background: white; } 17 мая 2019 в 10:31
  • 1
    Теперь вот так все нормально срабатывает #r1:checked ~ .navigation label:nth-of-type(1) { background: white; } 17 мая 2019 в 20:51

Ваш ответ

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

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