Красивый слайдер изображений с оригинальным эффектом

Всем,  доброго времени суток. Сегодня представляю вашему внимание красивый слайдер изображений с оригинальным эффектом. Он впишется в любой дизайн, а с установкой справится проще простого. Ничего не нужно трогать в шаблоне.

Предложенный ниже код устанавливается в гаджет HTML/JavaScript. Только сначала скопируйте его в блокнот, чтобы добавить изображения и названия картинок в строки, которые отмечены розовым и зелёным цветом. Рабочий вариант можно посмотреть на тестовом блоге

Демонстрация

<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='URL адрес картинки' />
            <span>Название</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src= ' URL адрес картинки' />
            <span>Название </span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='/'>
            <img src='URL адрес картинки ' />
            <span> Название</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='/'>
            <img src='URL адрес картинки ' />
            <span> Название</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='/'>
            <img src=' URL адрес картинки ' />
            <span>Название </span>
        </a>
    </li>
</ul>

<style>
#css3-slider {
  margin:30px auto;
  padding:0px 0px;
  width:550px;
  height:286px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}


#css3-slider li input + label {
  position:absolute;
  bottom:5px;
  left:10px;
  z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:#696969 ;
  color:white:
  padding:0px 0px;
  width:16px;
  text-align:center;
  cursor:pointer;
}

#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}


#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}


#css3-slider a {
  text-decoration:none !important;
}

#css3-slider li a span {
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:#696969 ;
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;
  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}


#css3-slider li input:checked + label {
  background-color:#39f ;
  color:white;
}


#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
  top:0%;
  left:0%;
  width:550px;
  height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;
  z-index:99;
}


#css3-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;
}


#css3-slider input {
  display:none;
}</style>

Код длинный, но пусть это вас не пугает. Если вы захотите добавить ещё изображения в слайдер то дополнительно добавляйте вот такой участок -

<li>
        <input type='radio' id='s6' name='num' />
        <label for='s6'>6</label>
        <a href='/'>
            <img src= ' URL адрес картинки' />
            <span>Название </span>
        </a>
    </li>

Соответственно, меняя цифры на большие. Готовый код вставляйте в любое место блога. Ширину и высоту этого слайдера, которые в коде выделены оранжевым цветом, тоже можно регулировать на ваше усмотрение.

Посмотрите ещё вариант как создать слайд - шоу на Яндекс - фотках и галерею миниатюр в этом сообщении, вдруг пригодится.

В сегодняшней шпаргалке ставлю точку. Если возникли вопросы, пишите в комментариях. Всем удачи и тёплых весенних денёчков. С наступающим праздником Победы. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email