CSS slider

by Noir Noir

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>TASK 1.3</title>
</head>

<body>
  <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="https://pixabay.com/get/57e0d2414250af14f6d1867dda6d49214b6ac3e45654794972267ad495/road-1072823_1920.jpg" alt=""/>
      <label for="r2" class="arrow right">&gt;</label>
      </div>
      <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>
      <div class="slide"><img src="https://pixabay.com/get/57e3d2404b55ad14f6d1867dda6d49214b6ac3e45654794972267adc96/sunset-1373171_1920.jpg" alt="">
      <label for="r2" class="arrow left">&lt;</label>
      <label for="r4" class="arrow right">&gt;</label>
      </div>
      <div class="slide"><img src="https://pixabay.com/get/57e2dd474f53ae14f6d1867dda6d49214b6ac3e456547949722679d595/fox-1284512_1920.jpg" alt="">
      <label for="r3" class="arrow left">&lt;</label>
      <label for="r5" class="arrow right">&gt;</label>
      </div>
      <div class="slide"><img src="https://pixabay.com/get/57e9d24a4e56a914f6d1867dda6d49214b6ac3e456547949722679d094/iceland-1979445_1920.jpg" alt="">
      <label for="r4" class="arrow left">&lt;</label>
      </div>

    </div>

    <div class="navigation">

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

CSS

/*---------------------GLOBAL---------------------*/


body {
  margin: 0;
  padding: 0;
}


/*---------------------SLIDER---------------------*/

.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 {
  position: relative;
  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%;
}

.slide .arrow {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  display: block;
  width: 50px;
  height: 50px;
  background: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.slide .arrow.left {
  left: 30px;
}
.slide .arrow.right {
  right: 30px;
}

/*Now when certain radio...