Слайдер карусель - вещь достаточно удобная, вверху мы видим ленту миниатюр, и, наведя курсор мыши на любую миниатюру, мы видим изображение целиком.
В этой статье я приведу пример простого слайдера карусели на чистом CSS.
Поехали.
Создаём папку Slider. В ней у нас будет папка Images с изображениями и два файла index.html и style.css.
Подготовьте изображения, сделайте их одним размером 900px/500px. Каждому изображению будет соответствовать его миниатюра 150px/83px.
В файле 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="slider">
<a href="#">
<img class="min" src="images/min1.jpg">
<img class="big" src="images/img1.jpg">
</a>
<a href="#">
<img class="min" src="images/min2.jpg">
<img class="big" src="images/img2.jpg">
</a>
<a href="#">
<img class="min" src="images/min3.jpg">
<img class="big" src="images/img3.jpg">
</a>
<a href="#">
<img class="min" src="images/min4.jpg">
<img class="big" src="images/img4.jpg">
</a>
<a href="#">
<img class="min" src="images/min5.jpg">
<img class="big" src="images/img5.jpg">
</a>
<a href="#">
<img class="big default" src="images/img1.jpg">
</a>
</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="slider">
<a href="#">
<img class="min" src="images/min1.jpg">
<img class="big" src="images/img1.jpg">
</a>
<a href="#">
<img class="min" src="images/min2.jpg">
<img class="big" src="images/img2.jpg">
</a>
<a href="#">
<img class="min" src="images/min3.jpg">
<img class="big" src="images/img3.jpg">
</a>
<a href="#">
<img class="min" src="images/min4.jpg">
<img class="big" src="images/img4.jpg">
</a>
<a href="#">
<img class="min" src="images/min5.jpg">
<img class="big" src="images/img5.jpg">
</a>
<a href="#">
<img class="big default" src="images/img1.jpg">
</a>
</div>
</body>
</html>
В файле style.css пишем стили.
html {
margin: 0px;
padding: 0px;
}
body {
background: #ccc;
}
.slider {
position: relative;
margin: 0 auto;
overflow: hidden;
width: 1000px;
height: 600px;
padding-left: 20px;
}
.big {
position: absolute;
top:600px;
left: 20px;
}
.slider a {
float: left;
margin: 15px;
}
.slider a:hover .big {
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
}
.slider a:hover .min {
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
}
.slider a:hover .big {
top: 120px;
}
.default {
top: 120px;
left: 20px;
z-index: -1;
}
margin: 0px;
padding: 0px;
}
body {
background: #ccc;
}
.slider {
position: relative;
margin: 0 auto;
overflow: hidden;
width: 1000px;
height: 600px;
padding-left: 20px;
}
.big {
position: absolute;
top:600px;
left: 20px;
}
.slider a {
float: left;
margin: 15px;
}
.slider a:hover .big {
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
}
.slider a:hover .min {
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
}
.slider a:hover .big {
top: 120px;
}
.default {
top: 120px;
left: 20px;
z-index: -1;
}
Скачать исходники.