Веб-мастерская Ларисы ВоронинойСлайдер карусель на чистом CSS.
WEB-мастерская Ларисы Ворониной logo

Слайдер карусель на чистом CSS. Янв 21 2017


Слайдер карусель  - вещь достаточно удобная, вверху мы видим ленту миниатюр, и, наведя курсор мыши на любую миниатюру, мы видим изображение целиком.

В этой статье я приведу пример простого слайдера карусели на чистом 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>

В файле 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;
}

Рейтинг@Mail.ru