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

слайдер
Всем,  доброго времени суток. Сегодня представляю вашему внимание красивый слайдер изображений с оригинальным эффектом. Он впишется в любой дизайн, а с установкой справится проще простого. Ничего не нужно трогать в шаблоне.
Предложенный ниже код устанавливается в гаджет 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


25 комментариев:

  1. нереально красивый слайдер! спасибо, Вика! еще одна головная боль: и куда его вставить?))))

    ОтветитьУдалить
  2. Ирина, спасибо за отзыв. Если Вы имеете в виду на какой блог, то тут я для Вас не лекарь. А вот куда конкретно в блоге попробую унять Вашу боль. Можно установить над сообщениями блога, или в гаджет в сайдбаре. Поиграйтесь с размерами ширины и высоты. Об этом в статье есть. И удачи Вам.

    ОтветитьУдалить
    Ответы
    1. главный вопрос - в какой блог))))

      Удалить
    2. Даа.., это правда. Сама так же бывает ломаю голову.

      Удалить
  3. Виктория, добрый вечер! С праздником Победы!! У меня не устанавливается полоса с названием. Все названия списком находятся за фотографией. оч. жаль. В чём может быть причина?

    ОтветитьУдалить
    Ответы
    1. Лариса,мне бы посмотреть где и куда вы устанавливаете. Так я затрудняюсь, что-то сказать. Или код мне на почту отправьте. Может что пропустили или меняли. Спасибо за поздравления.

      Удалить
    2. Еле прорвалась. Выбивает ошибку 502. Ссылку страницы отправила через форму связи. Спасибо!

      Удалить
    3. Сегодня все жалуются. Терпение. Всё будет ОК

      Удалить
  4. Вика Спасибо! А у меня проблема только в том, что фотографий не видно:( все получилось, но пустое поле, хотя все прокручивается:(

    ОтветитьУдалить
  5. eozhik у меня внизу есть форма связи отправьте ваш код. Посмотрю в чём дело.

    ОтветитьУдалить
  6. Вика отправила. Спасибо

    ОтветитьУдалить
  7. eozhik, письмо я не получила и не знаю причину. вот мой адрес почты рабочbй v.barad@mail.ru/

    ОтветитьУдалить
  8. попробую еще раз..

    ОтветитьУдалить
  9. eozhik смотрите правильный код в . Письмо отправила. Если что не понятно, обращайтесь.

    ОтветитьУдалить
  10. Вика Спасибо!!! :))

    ОтветитьУдалить
  11. Получилось, я так понимаю. Пожалуйста.

    ОтветитьУдалить
  12. Доброго времени суток Вика! Вставила слайдер после текста в сообщение, у меня рамка серая с названиями ушла на задний план, при чем если вставляю слайдер без текста сообщения, то все нормально получается. и как можно вставить текст после слайдера. Когда в обычном режиме (т.е. не в html) печатаю текст, то он сбивает слайдер? В тестовом блоге probtestez.blogspot.ru/2016/10/primer.html, посмотрите пожалуйста. С уважением Тата.

    ОтветитьУдалить
  13. У вас названия в коде 1 ступень и т.д не заключены в теги span

    ОтветитьУдалить
  14. Виктория добрый день! Да действительно нет тега span, но его почему-то убирает редактор т.е. я вношу код с тегом span сохраняю все, перехожу на просмотр сообщения, когда нажимаю на кнопки (1,2,3) опять серая рамка уходит на задний план. Возвращаюсь в редактор сообщения, а там нет этого тега! вручную вношу span сохраняю, перехожу посмотреть как получилось, у меня серая рамка все равно уходит на задний план! При чем попробовала слайдер разместить гаджетом, все нормально, серая рамка на месте все работает хорошо! Может код слайдера еще во что-то заключить, так сказать обособить его? С уважением Тата.

    ОтветитьУдалить
  15. Tata, да редактор ломает код и Вы правы, что слайдер работает в гаджете только.

    ОтветитьУдалить
  16. Вика, а может он конфликтует со списком? ul li можно поменять на другое (я поменяла точки в списке на картинку)? Так красиво получился слайдер, хотелось его применить! С уважением Тата.

    ОтветитьУдалить
  17. Tata эти теги не при чём. Они просто отвечают за список.

    ОтветитьУдалить
  18. Здравствуйте, у меня 2 вопроса.1) разместила слайдер на странице Блога.все нормально,но когда начинаю добавлять еще номера слайдов,они взаимозаменяются, то есть 1 слайд меняется на 6 и т.д. а не добавляются Почему? Куда вставлять новую часть кода? полностью после всего кода или как продолжение,где идет al li и т.д.

    ОтветитьУдалить
  19. и второй вопрос Раз у меня не добавляются слайды,решила просто размещать по несколько слайдеров на странице,но по другим названиям,как бы группируя..А не встают, только просмотр идет одного слайдера. Для добавления на страницу я полностью скопировала ваш код и вставила после первого слайдера.

    ОтветитьУдалить
    Ответы
    1. Код устанавливается перед закрывающим тегом /ul . В этом участке кода

      #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:nth-child(5) label {left:100px;} и т. д.

      2. Несколько слайдеров возможно не будут работать из-за того что у них один класс slider. Где я могу посмотреть .

      Удалить

Пользовательский поиск