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

Галерея карусель для сайта Янв 26 2017


По сути это слайдер с перемоткой изображений. Под слайдером располагается лента миниатюр. Галерея карусель написана на чистом CSS без использования Javascript и Jquery.

Как обычно создаём папку gallery-slider, в ней создаём папку images и два файла index.html и style.css.

В файле index.html пишем простую разметку.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" >
          <title>Галерея карусель</title>
     </head>
     <body>
         <div class="wrapper">
              <input type="radio" checked="checked" name="img" id="img1"/>
              <input type="radio" name="img" id="img2"/>
              <input type="radio" name="img" id="img3"/>
              <input type="radio" name="img" id="img4"/>
              <input type="radio" name="img" id="img5"/>
              <input type="radio" name="img" id="img6"/>
              <input type="radio" name="img" id="img7"/>
              <input type="radio" name="img" id="img8"/>
              <div class="gallery">
                   <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>
                   <label for="img8"></label>
              </div>
          </div>
     </body>
</html>

В файле style.css пишем стили.

body {
background: #222;
}
input[name="img"] {
display: none;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 1100px;
height: 700px;
margin-top: 10%;
}
.gallery {
margin: 0 auto;
width: 900px;
position: relative;
padding-top: 37%;
line-height: 0;
background-size: auto 100%;
background: no-repeat 50% 0;
}
.gallery label {
display: inline-block;
width: 105px;
height: 58px;
margin-top: 110px;
margin-left: 3.5px;
background: no-repeat 50% 50%;
background-size: calc(100% - 4px) calc(100% - 4px);
cursor: pointer;
}
#img1:checked ~ .gallery label:nth-of-type(1),
#img2:checked ~ .gallery label:nth-of-type(2),
#img3:checked ~ .gallery label:nth-of-type(3),
#img4:checked ~ .gallery label:nth-of-type(4),
#img5:checked ~ .gallery label:nth-of-type(5),
#img6:checked ~ .gallery label:nth-of-type(6),
#img7:checked ~ .gallery label:nth-of-type(7),
#img8:checked ~ .gallery label:nth-of-type(8) {
opacity: .3;
}#img1:checked ~ .gallery, .gallery label:nth-of-type(1) {background-image: url(images/img1.jpg);}
#img2:checked ~ .gallery, .gallery label:nth-of-type(2) {background-image: url(images/img2.jpg);}
#img3:checked ~ .gallery, .gallery label:nth-of-type(3) {background-image: url(images/img3.jpg);}
#img4:checked ~ .gallery, .gallery label:nth-of-type(4) {background-image: url(images/img4.jpg);}
#img5:checked ~ .gallery, .gallery label:nth-of-type(5) {background-image: url(images/img5.jpg);}
#img6:checked ~ .gallery, .gallery label:nth-of-type(6) {background-image: url(images/img6.jpg);}
#img7:checked ~ .gallery, .gallery label:nth-of-type(7) {background-image: url(images/img7.jpg);}
#img8:checked ~ .gallery, .gallery label:nth-of-type(8) {background-image: url(images/img8.jpg);}
/*Стрелочки*/
.gallery label:before {
position: absolute;
top: 40%;
border-width: 50px 25px;
border-style: solid;}
#img1:checked ~ .gallery label:nth-of-type(2):before,
#img2:checked ~ .gallery label:nth-of-type(3):before,
#img3:checked ~ .gallery label:nth-of-type(4):before,
#img4:checked ~ .gallery label:nth-of-type(5):before,
#img5:checked ~ .gallery label:nth-of-type(6):before,
#img6:checked ~ .gallery label:nth-of-type(7):before,
#img7:checked ~ .gallery label:nth-of-type(8):before,
#img8:checked ~ .gallery label:nth-of-type(1):before {
content: "";
right: -60px;
border-color: transparent transparent transparent #444;
}
#img1:checked ~ .gallery label:nth-of-type(8):before,
#img2:checked ~ .gallery label:nth-of-type(1):before,
#img3:checked ~ .gallery label:nth-of-type(2):before,
#img4:checked ~ .gallery label:nth-of-type(3):before,
#img5:checked ~ .gallery label:nth-of-type(4):before,
#img6:checked ~ .gallery label:nth-of-type(5):before,
#img7:checked ~ .gallery label:nth-of-type(6):before,
#img8:checked ~ .gallery label:nth-of-type(7):before{
content: "";
left: -60px;
border-color: transparent #444 transparent transparent;
}