Realiser un Slider avec CSS

Salut les lecteurs pour ce nouveau tutoriel on va réaliser un slider avec du CSS uniquement. Allons y👉

Code HTML


<!DOCTYPE html>

<html lang="fr">

<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">

<meta name="Description" content="Enter your description here"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<link rel="stylesheet" href="style.css">

<title>Bootstrap Slider | Coding Team</title>

</head>

<body>

	<div class="section full-height over-hide px-4 px-sm-0">

		<div class="container">

			<div class="row full-height justify-content-center">

				<div class="col-lg-10 col-xl-8 align-self-center padding-tb">

					<div class="section mx-auto text-center slider-height-padding">

			          	<input class="checkbox frst" type="radio" id="slide-1" name="slider" checked/>

			          	<label for="slide-1"></label>

			          	<input class="checkbox scnd" type="radio" name="slider" id="slider-2"/>

			          	<label for="slider-2"></label>

			          	<input class="checkbox thrd" type="radio" name="slider" id="slider-3"/>

			          	<label for="slider-3"></label>

			          	<input class="checkbox foth" type="radio" name="slider" id="slider-4"/>

			          	<label for="slider-4"></label>

						<ul>

							<li>

								<span>Avengers</span>

						    </li>

							<li>

								<span>Spiderman</span>

						    </li>

							<li>

								<span>Doctor Strange</span>

						    </li>

							<li>

								<span>Captain America</span>

						    </li>

					    </ul>

				    </div>

			    </div>

	      	</div>

	    </div>

	</div>

</body>

</html>

Code CSS


@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900");

body {

  font-family: "Poppins", sans-serif;

  font-weight: 300;

  font-size: 15px;

  line-height: 1.7;

  color: #343434;

  background-color: #000;

  overflow-y: hidden;

}

a {

  cursor: pointer;

}

a:hover {

  text-decoration: none;

}

.section {

  position: relative;

  width: 100%;

  display: block;

}

.full-height {

  min-height: 100vh;

}

.over-hide {

  overflow: hidden;

}

.padding-tb {

  padding: 100px 0;

}

[type="radio"]:checked,

[type="radio"]:not(:checked) {

  position: absolute;

  left: -9999px;

}

.checkbox:checked + label,

.checkbox:not(:checked) + label {

  position: relative;

  cursor: pointer;

  margin: 0 auto;

  text-align: center;

  margin-right: 6px;

  margin-left: 6px;

  display: inline-block;

  width: 50px;

  height: 50px;

  border: 3px solid #bdc3c7;

  background-size: cover;

  background-position: center;

  box-sizing: border-box;

  transition: all 0.2s ease;

  background-image: url(avengers.jpg);

  animation: border-transform 6s linear infinite alternate forwards;

  animation-play-state: paused;

}

.checkbox.scnd + label {

  background-image: url(spider.png);

}

.checkbox.thrd + label {

  background-image: url(strange.jpg);

}

.checkbox.foth + label {

  background-image: url(captain.jpg);

}

.checkbox:checked + label {

  box-shadow: 0 8px 25px 0 rgba(16, 39, 112, 0.3);

  transform: scale(1.3);

  -webkit-animation-play-state: running;

  -moz-animation-play-state: running;

  animation-play-state: running;

}

@keyframes border-transform {

  0%,

  100% {

    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;

  }

  14% {

    border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;

  }

  28% {

    border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;

  }

  42% {

    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;

  }

  56% {

    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;

  }

  70% {

    border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;

  }

  84% {

    border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;

  }

}

.slider-height-padding {

  padding-top: 440px;

}

ul {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 100%;

  z-index: 100;

  padding: 0;

  margin: 0;

  list-style: none;

}

ul li {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  display: block;

  z-index: 100;

  padding: 0;

  margin: 0;

  list-style: none;

  height: 400px;

  border: 5px solid #bdc3c7;

  background-size: cover;

  background-position: center;

  background-image: url(avengers.jpg);

  border-radius: 50%;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

  font-weight: 900;

  font-size: 24px;

  letter-spacing: 2px;

  line-height: 2.7;

  color: #343434;

  writing-mode: vertical-rl;

  opacity: 0;

  pointer-events: none;

  box-shadow: 0 8px 25px 0 rgba(16, 39, 112, 0.1);

  -webkit-transition: all 0.5s ease;

  transition: all 0.5s ease;

}

ul li span {

  mix-blend-mode: difference;

}

ul li:nth-child(2) {

  background-image: url(spider.png);

}

ul li:nth-child(3) {

  background-image: url(strange.jpg);

}

ul li:nth-child(4) {

  background-image: url(captain.jpg);

}

.checkbox.frst:checked ~ ul li:nth-child(1) {

  opacity: 1;

  pointer-events: auto;

  border-radius: 16px;

}

.checkbox.scnd:checked ~ ul li:nth-child(2) {

  opacity: 1;

  pointer-events: auto;

  border-radius: 16px;

}

.checkbox.thrd:checked ~ ul li:nth-child(3) {

  opacity: 1;

  pointer-events: auto;

  border-radius: 16px;

}

.checkbox.foth:checked ~ ul li:nth-child(4) {

  opacity: 1;

  pointer-events: auto;

  border-radius: 16px;

}

@media (max-width: 767px) {

  .slider-height-padding {

    padding-top: 340px;

  }

  ul li {

    height: 300px;

    font-size: 13px;

    letter-spacing: 1px;

  }

}

@media (max-width: 575px) {

  .slider-height-padding {

    padding-top: 240px;

  }

  ul li {

    height: 200px;

  }

}