Большинство слайдеров пишутся с использованием JavaScript и библиотек JQuery. В этой статье я покажу, как написать слайдер на чистом CSS.
Итак, создаём папку Slider.
В папке у нас будет папка с изображениями «images» и два файла index.html и style.css.
Заранее подготовьте изображения, скачать бесплатную графику можно на бесплатных фотостоках pixabay.com, .
Отредактируйте изображения в Фотошопе, сделайте их все одинакового размера, в моём примере это 900px на 500px.
В файле index.html пишем простенькую разметку нашего слайдера.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Слайдер на чистом CSS</title>
</head>
<body>
<div class="wrapper">
<input type="radio" name="point" id="img1" checked>
<input type="radio" name="point" id="img2">
<input type="radio" name="point" id="img3">
<input type="radio" name="point" id="img4">
<input type="radio" name="point" id="img5">
<input type="radio" name="point" id="img6">
<input type="radio" name="point" id="img7">
<div class="slider">
<div class="images img1"></div>
<div class="images img2"></div>
<div class="images img3"></div>
<div class="images img4"></div>
<div class="images img5"></div>
<div class="images img6"></div>
<div class="images img7"></div>
</div>
<div class="controls">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
<label for="img4"></label>
<label for="img5"></label>
<label for="img6"></label>
<label for="img7"></label>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Слайдер на чистом CSS</title>
</head>
<body>
<div class="wrapper">
<input type="radio" name="point" id="img1" checked>
<input type="radio" name="point" id="img2">
<input type="radio" name="point" id="img3">
<input type="radio" name="point" id="img4">
<input type="radio" name="point" id="img5">
<input type="radio" name="point" id="img6">
<input type="radio" name="point" id="img7">
<div class="slider">
<div class="images img1"></div>
<div class="images img2"></div>
<div class="images img3"></div>
<div class="images img4"></div>
<div class="images img5"></div>
<div class="images img6"></div>
<div class="images img7"></div>
</div>
<div class="controls">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
<label for="img4"></label>
<label for="img5"></label>
<label for="img6"></label>
<label for="img7"></label>
</div>
</div>
</body>
</html>
В файле style.css пишем стили.
body {
background: #4076e1;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 900px;
height: 500px;
margin-top: 50px;
box-shadow: 0 0 20px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .7);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .7);
}
.wrapper > input {
display: none;
}
.wrapper .controls {
position: absolute;
}
.wrapper label {
position: relative;
cursor: pointer;
display: inline-block;
width: 11px;
height: 11px;
margin: 25px 12px 0 15px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}
.wrapper label:hover,
#img1:checked ~ .controls label:nth-of-type(1),
#img2:checked ~ .controls label:nth-of-type(2),
#img3:checked ~ .controls label:nth-of-type(3),
#img4:checked ~ .controls label:nth-of-type(4),
#img5:checked ~ .controls label:nth-of-type(5),
#img6:checked ~ .controls label:nth-of-type(6),
#img7:checked ~ .controls label:nth-of-type(7) {
background: #0640b3;
}
.wrapper label:after {
border: 2px solid #fff;
content: " ";
display: block;
width: 15px;
height: 15px;
left: -4px;
position: absolute;
top: -4px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}
.slider {
background-color: #4076e1;
width: inherit;
height: inherit;
overflow: hidden;
position: relative;
}
.images {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
z-index: 0;
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
.img1 { background-image: url(images/img1.jpg); }
.img2 { background-image: url(images/img2.jpg); }
.img3 { background-image: url(images/img3.jpg); }
.img4 { background-image: url(images/img4.jpg); }
.img5 { background-image: url(images/img5.jpg); }
.img6 { background-image: url(images/img6.jpg); }
.img7 { background-image: url(images/img7.jpg); }
#img1:checked ~ .slider > .img1,
#img2:checked ~ .slider > .img2,
#img3:checked ~ .slider > .img3,
#img4:checked ~ .slider > .img4,
#img5:checked ~ .slider > .img5,
#img6:checked ~ .slider > .img6,
#img7:checked ~ .slider > .img7{
opacity: 1;
z-index: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
}
background: #4076e1;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 900px;
height: 500px;
margin-top: 50px;
box-shadow: 0 0 20px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .7);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .7);
}
.wrapper > input {
display: none;
}
.wrapper .controls {
position: absolute;
}
.wrapper label {
position: relative;
cursor: pointer;
display: inline-block;
width: 11px;
height: 11px;
margin: 25px 12px 0 15px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}
.wrapper label:hover,
#img1:checked ~ .controls label:nth-of-type(1),
#img2:checked ~ .controls label:nth-of-type(2),
#img3:checked ~ .controls label:nth-of-type(3),
#img4:checked ~ .controls label:nth-of-type(4),
#img5:checked ~ .controls label:nth-of-type(5),
#img6:checked ~ .controls label:nth-of-type(6),
#img7:checked ~ .controls label:nth-of-type(7) {
background: #0640b3;
}
.wrapper label:after {
border: 2px solid #fff;
content: " ";
display: block;
width: 15px;
height: 15px;
left: -4px;
position: absolute;
top: -4px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}
.slider {
background-color: #4076e1;
width: inherit;
height: inherit;
overflow: hidden;
position: relative;
}
.images {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
z-index: 0;
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
.img1 { background-image: url(images/img1.jpg); }
.img2 { background-image: url(images/img2.jpg); }
.img3 { background-image: url(images/img3.jpg); }
.img4 { background-image: url(images/img4.jpg); }
.img5 { background-image: url(images/img5.jpg); }
.img6 { background-image: url(images/img6.jpg); }
.img7 { background-image: url(images/img7.jpg); }
#img1:checked ~ .slider > .img1,
#img2:checked ~ .slider > .img2,
#img3:checked ~ .slider > .img3,
#img4:checked ~ .slider > .img4,
#img5:checked ~ .slider > .img5,
#img6:checked ~ .slider > .img6,
#img7:checked ~ .slider > .img7{
opacity: 1;
z-index: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
}
Скачать исходники.