Всем, доброго времени суток. Красивый слайдер на CSS c всплывающим описанием. Очень просто устанавливается в гаджете HTML/JavaScript или непосредственно в сообщении блога в режиме HTML. Вам только понадобиться установить в коде свои отображаемые в слайде картинки и дать им название.
Он у меня в своё время стоял на одном из тестовых блогов и, наверняка, мои давние подписчики видели его. Пришлось недавно его немного подкорректировать, так как не совсем корректно выскакивал блок с описанием. Вроде, сейчас работает нормально.
Слайдер рассчитала на 4 элемента. Вся ширина поля вместе с блоком описания рассчитана на 900 px. Высота 300 px. Так что картинки должны быть одинакового размера высотой 300 px и шириной 500 - 600 px.
Перейдите на на тестовый блог, чтобы увидеть его в работе. Или скопируйте код, зайдите на эту страницу и вставьте его в форму проверки. Там же можно увидеть итог и даже сделать свои настройки.
То что отмечено розовым - это будут адреса ваших картинок. Синим - их название. Все переменные я отметила пояснительным текстом в коде. Возможно придётся подправить значение top:70%; в ту или другую сторону. Это положение выдвигающегося блока с описанием относительно верхнего края.
Здесь ещё один красивый слайдер для изображений.
Вот и все настройки. Если что не понятно пишите в комментариях.
Всё на сегодня. Всем спасибо и до новых встреч.
Он у меня в своё время стоял на одном из тестовых блогов и, наверняка, мои давние подписчики видели его. Пришлось недавно его немного подкорректировать, так как не совсем корректно выскакивал блок с описанием. Вроде, сейчас работает нормально.
Слайдер рассчитала на 4 элемента. Вся ширина поля вместе с блоком описания рассчитана на 900 px. Высота 300 px. Так что картинки должны быть одинакового размера высотой 300 px и шириной 500 - 600 px.
Перейдите на на тестовый блог, чтобы увидеть его в работе. Или скопируйте код, зайдите на эту страницу и вставьте его в форму проверки. Там же можно увидеть итог и даже сделать свои настройки.
<div class="slides">
<ul>
<li><img src="http://www.astromeridian.ru/assets/images/sonnik/priroda.jpg" alt="image01" />
<div>название</div>
</li>
<li><img src="http://i29.fastpic.ru/big/2011/1217/c3/62541e77fd313c9be765a83fc68420c3.jpg" alt="image02" />
<div>название</div>
</li>
<li><img src="http://www.travelshoppingitaly.com/wp-content/uploads/2013/03/krasivo-ozero-peyzazh-gory-priroda-favim-ru-337491.jpg" alt="image03" />
<div>название</div>
</li>
<li><img src="http://tg-journal.com/images/arhiv/turizm2/kuba/kuba.jpg" alt="image04" />
<div>название</div>
</li>
</ul>
</div>
<style>
.slides {
height:300px; /*высот слайдера */
margin:50px auto;
overflow:hidden;
position:relative;
width:900px; /* общая ширина */
}
.slides ul {
list-style:none;
position:relative;
}
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#003366; /*фон заголовка */
border-radius:10px 10px 10px 10px; /*округляем углы */
box-shadow:0 0 5px #FFFFFF inset; /* размер и тень рамки */
color:#FFFFFF; /*цвет шрифта */
font-size:24px; /*размер шрифта */
left:10%; /* отступ */
margin:0 auto;
padding: 20px;
position:absolute;
top:70%; /*устанавливается подбором персонально */
width:200px; /*высота панели */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}</style>
<ul>
<li><img src="http://www.astromeridian.ru/assets/images/sonnik/priroda.jpg" alt="image01" />
<div>название</div>
</li>
<li><img src="http://i29.fastpic.ru/big/2011/1217/c3/62541e77fd313c9be765a83fc68420c3.jpg" alt="image02" />
<div>название</div>
</li>
<li><img src="http://www.travelshoppingitaly.com/wp-content/uploads/2013/03/krasivo-ozero-peyzazh-gory-priroda-favim-ru-337491.jpg" alt="image03" />
<div>название</div>
</li>
<li><img src="http://tg-journal.com/images/arhiv/turizm2/kuba/kuba.jpg" alt="image04" />
<div>название</div>
</li>
</ul>
</div>
<style>
.slides {
height:300px; /*высот слайдера */
margin:50px auto;
overflow:hidden;
position:relative;
width:900px; /* общая ширина */
}
.slides ul {
list-style:none;
position:relative;
}
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#003366; /*фон заголовка */
border-radius:10px 10px 10px 10px; /*округляем углы */
box-shadow:0 0 5px #FFFFFF inset; /* размер и тень рамки */
color:#FFFFFF; /*цвет шрифта */
font-size:24px; /*размер шрифта */
left:10%; /* отступ */
margin:0 auto;
padding: 20px;
position:absolute;
top:70%; /*устанавливается подбором персонально */
width:200px; /*высота панели */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}</style>
То что отмечено розовым - это будут адреса ваших картинок. Синим - их название. Все переменные я отметила пояснительным текстом в коде. Возможно придётся подправить значение top:70%; в ту или другую сторону. Это положение выдвигающегося блока с описанием относительно верхнего края.
Здесь ещё один красивый слайдер для изображений.
Вот и все настройки. Если что не понятно пишите в комментариях.
Всё на сегодня. Всем спасибо и до новых встреч.
Здесь вы можете оформить подписку на новые шпаргалки
Вставляла код в форму проверки, смотрится оригинально. Вика, спасибо за код и доходчивое объяснение!!!
ОтветитьУдалитьАлла, Там бывает даже притормаживает немного. Всегда пожалуйста и спасибо за отзыв.
УдалитьВика, привет. Очень симпатично смотрится. Попробую где-то применить. Спасибо за шпаргалки. Удачи!
ОтветитьУдалитьЛюба, не ты ли у меня этот код давненько спрашивала. Или я путаю. Попробуй я его доработала маленько. Спасибо тебе.
УдалитьЗдравствуйте, Виктория!На Вашем блоге http://smotritetyt.blogspot.ru/ есть оригинальное украшение в овале день недели, число, год. Можно получить код ? Буду Вам признательна. Спасибо.
ОтветитьУдалитьЗдравствуйте, Ирина. как сделать такое оформление написано в этом сообщении. http://www.shpargalochki.ru/2014/06/krasivaja-data-soobshhenija.html Будут вопросы. обращайтесь.
ОтветитьУдалитьКак интересно! Спасибо Вика!
ОтветитьУдалитьТатьяна, согласна, главное просто в установке.
УдалитьДобрый вечер, Виктория! На тестовом блоге http://dly-seby.blogspot.com.by/ картинка "Горы" (справа). Скажите, как сделать такое оформление. Чтоб при наведении курсора фото сдвигалось и всплывала информация. Спасибо!
ОтветитьУдалить