
<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='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>
Соответственно, меняя цифры на большие. Готовый код вставляйте в любое место блога. Ширину и высоту этого слайдера, которые в коде выделены оранжевым цветом, тоже можно регулировать на ваше усмотрение.
Посмотрите ещё вариант как создать слайд - шоу на Яндекс - фотках и галерею миниатюр в этом сообщении, вдруг пригодится.
В сегодняшней шпаргалке ставлю точку. Если возникли вопросы, пишите в комментариях. Всем удачи и тёплых весенних денёчков. С наступающим праздником Победы. До встречи.
здесь можно оформить подписку на новые шпаргалки
нереально красивый слайдер! спасибо, Вика! еще одна головная боль: и куда его вставить?))))
ОтветитьУдалитьИрина, спасибо за отзыв. Если Вы имеете в виду на какой блог, то тут я для Вас не лекарь. А вот куда конкретно в блоге попробую унять Вашу боль. Можно установить над сообщениями блога, или в гаджет в сайдбаре. Поиграйтесь с размерами ширины и высоты. Об этом в статье есть. И удачи Вам.
ОтветитьУдалитьглавный вопрос - в какой блог))))
УдалитьДаа.., это правда. Сама так же бывает ломаю голову.
УдалитьВиктория, добрый вечер! С праздником Победы!! У меня не устанавливается полоса с названием. Все названия списком находятся за фотографией. оч. жаль. В чём может быть причина?
ОтветитьУдалитьЛариса,мне бы посмотреть где и куда вы устанавливаете. Так я затрудняюсь, что-то сказать. Или код мне на почту отправьте. Может что пропустили или меняли. Спасибо за поздравления.
УдалитьЕле прорвалась. Выбивает ошибку 502. Ссылку страницы отправила через форму связи. Спасибо!
УдалитьСегодня все жалуются. Терпение. Всё будет ОК
УдалитьВика Спасибо! А у меня проблема только в том, что фотографий не видно:( все получилось, но пустое поле, хотя все прокручивается:(
ОтветитьУдалитьeozhik у меня внизу есть форма связи отправьте ваш код. Посмотрю в чём дело.
ОтветитьУдалитьВика отправила. Спасибо
ОтветитьУдалитьeozhik, письмо я не получила и не знаю причину. вот мой адрес почты рабочbй v.barad@mail.ru/
ОтветитьУдалитьпопробую еще раз..
ОтветитьУдалитьeozhik смотрите правильный код в . Письмо отправила. Если что не понятно, обращайтесь.
ОтветитьУдалитьВика Спасибо!!! :))
ОтветитьУдалитьПолучилось, я так понимаю. Пожалуйста.
ОтветитьУдалитьДоброго времени суток Вика! Вставила слайдер после текста в сообщение, у меня рамка серая с названиями ушла на задний план, при чем если вставляю слайдер без текста сообщения, то все нормально получается. и как можно вставить текст после слайдера. Когда в обычном режиме (т.е. не в html) печатаю текст, то он сбивает слайдер? В тестовом блоге probtestez.blogspot.ru/2016/10/primer.html, посмотрите пожалуйста. С уважением Тата.
ОтветитьУдалитьУ вас названия в коде 1 ступень и т.д не заключены в теги span
ОтветитьУдалитьВиктория добрый день! Да действительно нет тега span, но его почему-то убирает редактор т.е. я вношу код с тегом span сохраняю все, перехожу на просмотр сообщения, когда нажимаю на кнопки (1,2,3) опять серая рамка уходит на задний план. Возвращаюсь в редактор сообщения, а там нет этого тега! вручную вношу span сохраняю, перехожу посмотреть как получилось, у меня серая рамка все равно уходит на задний план! При чем попробовала слайдер разместить гаджетом, все нормально, серая рамка на месте все работает хорошо! Может код слайдера еще во что-то заключить, так сказать обособить его? С уважением Тата.
ОтветитьУдалитьTata, да редактор ломает код и Вы правы, что слайдер работает в гаджете только.
ОтветитьУдалитьВика, а может он конфликтует со списком? ul li можно поменять на другое (я поменяла точки в списке на картинку)? Так красиво получился слайдер, хотелось его применить! С уважением Тата.
ОтветитьУдалитьTata эти теги не при чём. Они просто отвечают за список.
ОтветитьУдалитьЗдравствуйте, у меня 2 вопроса.1) разместила слайдер на странице Блога.все нормально,но когда начинаю добавлять еще номера слайдов,они взаимозаменяются, то есть 1 слайд меняется на 6 и т.д. а не добавляются Почему? Куда вставлять новую часть кода? полностью после всего кода или как продолжение,где идет al li и т.д.
ОтветитьУдалитьи второй вопрос Раз у меня не добавляются слайды,решила просто размещать по несколько слайдеров на странице,но по другим названиям,как бы группируя..А не встают, только просмотр идет одного слайдера. Для добавления на страницу я полностью скопировала ваш код и вставила после первого слайдера.
ОтветитьУдалитьКод устанавливается перед закрывающим тегом /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. Где я могу посмотреть .