Если вам нужен простенький слайдер для сайта, вы попали по адресу. Предложенный мной слайдер очень прост, сделан на чистейшем CSS3 и не требует использования javascript, jQuery и др.
Простой далеко не значит никакой, слайдер имеет красивый эффект затухания, а с правой стороны выезжает текст.
Этот красивый слайдер я уже опробовал на практике для одного заказа. Заказчик был доволен.
Итак, для начала вы можете посмотреть демонстрацию этого слайдера:
[посмотреть демонстрацию] или [скачать исходник]
Давайте приступим к созданию слайдера и настроим его, так как мы хотим.
Для начала создайте файл «index.html», папку «images» и залейте туда четыре картинки img1.jpg, img2.jpg, img3.jpg, img4.jpg .
Откройте HTML-файл и вставьте этот код в то место, где вы хотите, чтобы отображался слайдер (но обязательно между тегами <body></body>).
<!--слайдер на блоге BlogGood.ru -->
<div class="slides">
<ul>
<li><img src="images/img1.jpg" title="Заголовок для изображения #1" alt="" />
<div>Текст для слайдера #1</div>
</li>
<li><img src="images/ img2.jpg" title="Заголовок для изображения #2" alt="" />
<div>Текст для слайдера #2</div>
</li>
<li><img src="images/ img3.jpg" title="Заголовок для изображения #3" alt="" />
<div>Текст для слайдера #3</div>
</li>
<li><img src="images/ img4.jpg" title="Заголовок для изображения #4" alt="" />
<div>Текст для слайдера #4</div>
</li>
<!-- сюда добавляем по необходимости еще слайды -->
</ul>
</div>
Как видите, в коде я создал четыре слайда. Туда входит картинка (img1.jpg, img2.jpg, img3.jpg, img4.jpg), описание к картинке (title) и текст для картинки.
<li> <img src="images/img1.jpg" title="Заголовок для изображения #1" alt="" /> <div>Текст для слайдера #1</div> </li>
Если вам нужно добавить больше слайдов, достаточно добавить вот эту строчку перед </ul>:
<li> <img src="images/img5.jpg" title="Заголовок для изображения #5" alt="" /> <div>Текст для слайдера #5</div> </li>
Пример с картинкой:
Увеличить картинку?
Вот так это будет выглядеть:
<!-- слайдер на блоге BlogGood.ru -->
<div class="slides">
<ul>
<li><img src="images/img1.jpg" title="Заголовок для изображения #1" alt="" />
<div>Текст для слайдера #1</div>
</li>
<li><img src="images/img2.jpg" title="Заголовок для изображения #2" alt="" />
<div>Текст для слайдера #2</div>
</li>
<li><img src="images/img3.jpg" title="Заголовок для изображения #3" alt="" />
<div>Текст для слайдера #3</div>
</li>
<li><img src="images/img4.jpg" title="Заголовок для изображения #4" alt="" />
<div>Текст для слайдера #4</div>
</li>
<li><img src="images/img5.jpg" title="Заголовок для изображения #5" alt="" />
<div>Текст для слайдера #5</div>
</li>
<!-- сюда добавляем по необходимости еще слайды -->
</ul>
</div>
Теперь создайте CSS файл и вставьте следующий код:
/* ползунок */
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}
/* keyframes #anim_slides */
@-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;
/* css3 анимация */
-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;
}
/* css3 delays */
.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;
}
/* keyframes #anim_titles */
@-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:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
/* css3 анимация */
-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;
}
Как видите, все просто.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Как изменить размер текста – JavaScript
Как сделать на сайте кнопку «Наверх» как ВКонтакте
Эффект падающего снега
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222517 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187685 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186563
42 Ответов на комментарий - Как создать красивый слайдер для сайта с помощью CSS3 и HTML
Добавить комментарий
Метки: для сайта, слайдер, эффекты для сайта
Замечательный слайдер,а можно ли сделать так, чтобы в Explorerе хотя появлялась картинка (первый слайд), так как он там не работает.
Инна, у Вас в Explorerе возможно отключен показ картинок, так как на моем Explorerе отображается последнее изображение. Попробуйте в меню браузера перейти на “Сервис”-“Свойства обозревателя”-“Дополнительно”-“Восстановить дополнительные параметры”.
Здравствуйте! подскажите как убрать окно с текстом? а анимация картинок чтоб работала
Здравствуйте, Сергей!
Достаточно убрать блок div:
Вот готовый код:
<!--слайдер на блоге BlogGood.ru --> <div class="slides"> <ul> <li><img src="images/img1.jpg" title="Заголовок для изображения #1" alt="" /> </li> <li><img src="images/ img2.jpg" title="Заголовок для изображения #2" alt="" /> </li> <li><img src="images/ img3.jpg" title="Заголовок для изображения #3" alt="" /> </li> <li><img src="images/ img4.jpg" title="Заголовок для изображения #4" alt="" /> </li> <!-- сюда добавляем по необходимости еще слайды --> </ul> </div>Хочу добавить больше 4 слайдеров! в код вставил код тэга , но у меня пятый слайд выходит одновременно с первым! Что нужно добавить в css что бы слайды выходили по очереди с одинаковым интервалом?
дайте ваш код
на сай
css не менял, в html вставил после pic4:
Теплый туалет круглый год
в целом получилось так:
Мы Устраняем неприятный запах на участке за 24 часа
Мы избавляем от осуждающих взглядов соседей
Вы будете экономить на услугах ассенизатора
У Вас будут Чистые сточные воды без запахов
Теплый туалет круглый год
Владимир, кода я не вижу.
В браузерах Opepa и Explorer у меня почему-то не работает, а в Chrome и Firefox отлично. Причину подскажите.
Причина, нужно обновить браузеры Opepa и Explorer. У меня на всех все работает.
Здравствуйте, а как скорость поменять?
Здравствуйте, Андрей!
В CSS строка 57, 66 – для слайдов
строка 153, 162 – для текста
Как увеличить слайдер?
.slides { height: здесь; width: здесь; }Скажите, пожалуйста,а как его сделать на всю ширину экрана?
.slides { height: auto; width: 100%; }Всё просто и классно работает!
НО!
Пытаюсь добавить 7 слайдов. Всё равно показывает только 4 слайда.
<div class="slides"> <ul> <li><img src="images/img1.jpg" title="Заголовок для изображения #1" alt="" /> <div>Текст для слайдера #1</div> </li> <li><img src="images/img2.jpg" title="Заголовок для изображения #2" alt="" /> <div>Текст для слайдера #2</div> </li> <li><img src="images/img3.jpg" title="Заголовок для изображения #3" alt="" /> <div>Текст для слайдера #3</div> </li> <li><img src="images/img4.jpg" title="Заголовок для изображения #4" alt="" /> <div>Текст для слайдера #4</div> </li> <li><img src="images/img5.jpg" title="Заголовок для изображения #5" alt="" /> <div>Текст для слайдера #5</div> </li> <li><img src="images/img6.jpg" title="Заголовок для изображения #6" alt="" /> <div>Текст для слайдера #6</div> </li> <li><img src="images/img7.jpg" title="Заголовок для изображения #7" alt="" /> <div>Текст для слайдера #7</div> </li> </ul> </div>Что не так?
Да, к сожалению не работает в IE. Пробовал на 9 и 11 IE с последними обновлениями и различными установками безопасности. В Firefox работает отлично.
Хммм!, Действительно, Павел, вы правы больше 4 слайдов добавить нельзя. Пытался исправить этот косяк, не получилось
Сейчас времени нет копать. Но может дело в CSS-там прописано время смены слайдов только для 4-х изображений. Да и ещё. Данный слайдер не работает в IE9, IE10 и в Яндекс браузере. В Лисе работает отлично, в IE11 с глюками. В Опере и Хроме не пробовал.
Добавить еще слайдеры достаточно просто. Сейчас объясню для тех кто не знает и не понимает в CSS. Читайте внимательно!
Смотрим вот на этот код:
<li><img src="images/img1.jpg" title="Заголовок для изображения #1" alt="" /> <div>Текст для слайдера #1</div> </li> <li><img src="images/img2.jpg" title="Заголовок для изображения #2" alt="" /> <div>Текст для слайдера #2</div> </li> <li><img src="images/img3.jpg" title="Заголовок для изображения #3" alt="" /> <div>Текст для слайдера #3</div> </li> <li><img src="images/img4.jpg" title="Заголовок для изображения #4" alt="" /> <div>Текст для слайдера #4</div> </li>В нем всего 4 слайдера, но все они под порядковыми номерами. Добавляем пятый слайдер вот так
Теперь чтобы он появился у нас, его нужно прописать в СSS стилях.
Находим вот такие строчки в коде:
/* css3 delays */ .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; }Обратите внимание на порядковые номера и время анимации.
Каждый слайдер имеет свое время и этот интервал соответствует 6.0s. Значит чтобы появился пятый слайд нужно ко времени появления четвертого слайда прибавить 6.0s и обязательно поставить порядковый номер
Вот код пятого слайдера:
.slides ul li:nth-child(5), .slides ul li:nth-child(5) div { -webkit-animation-delay: 24.0s; -moz-animation-delay: 24.0s; }Вам просто не нужно забывать добавлять порядковый номер и время для нового слайда. Время можно менять как вам угодно. К примеру первый слайд появится через 6.0s, а второй мы хотим чтоб появился не через 6.0s а через 10.0s, тогда второй будет иметь время появления 16.0s
Вот вроде и все. Сам проверял и все работает.
А вот в IE действительно не хочет работать. Этот браузер не все CSS3 стили понимает. Могу сказать одно, можно наплевать на этот браузер и поставить данный слайдер, но для те 10% людей которые используют IE не будут видеть слайдер. Если он привязан к стилям вашего сайта то это конечно не очень хорошо если человек не увидит его. Короче смотрите сами.
Действительно, Александр! Не внимательно мы смотрели! Спасибо за комментарий!
Почему не работает ссылка? Ставишь на картинку – не работает. Ставишь на текст – не работает. Даже пробовал на div – однако тоже не работает, кто не будь может уже сталкивался ???
Если вам нужен слайдер где ссылку в картинку можно вставить, то отпишите мне и я вышлю вам ссылку на скачивание
Здравствуйте, не могу настроить слайдер работая в хроме. Показывает пустое белое поле в том месте где должны быть картинки
Здравствуйте, Карина!
Проверьте путь к картинкам.
слайдер понравился но хочется узнать как вставить 2 слайдера разных размеров и можно поменять стиль переключения миниатюр???
“как вставить 2 слайдера разных размеров” – а Вы не пробовали обрезать картинки под нужный вам размер?
Если нужно сделать больше 4 слайдов, посмотрите как это делать в комментариях выше.
А вот здесь то я не понял – “поменять стиль переключения миниатюр”
ТО БИШЬ СДЕЛАТЬ РАЗНЫЕ ПЕРЕКАТЫ МЕЖДУ СМЕНОЙ КАРТИНКИ
Я ВСТАВИЛ 20 КАРТИНОК ОДНОГО РАЗМЕРА НА СТРАНИЦУ НО НАДО ПОСТАВИТЬ ТУДА 2 СЛАЙДЕР С ДРУГИМИ РАЗМЕРАМИ
мне
.slides img { width: 200px; }и мне пожалуйста
Здравствуйте!
А у Вас нет в наличии слайдера, который можно самому на сайте переключать и в который можно вставлять ссылки?
Здравствуйте, Александр!
Такого слайдер в наличие у меня нет.
Т.е. на этот слайдер невозможно вставить ссылки? Чтобы каждая картинка была ссылкой?
Попробуйте.
че… ЕЩЕ РАЗ попробывать…? Я же спрашиваю просто… я не спец… и пробывал методом тыка мульон раз… нет так нет, жаль…
Здравствуйте Степан, вставил ссылки в картинки слайдера, почему-то во всех картинках отображается ссылка из последней картинки, хотя присвоил всем 4 картинкам свою ссылку?
У меня такая же проблема, как и парня вверху. Вся адресация идёт к последнему слайдеру. Как исправить?
Спасибо за слайдер.
Но у меня тоже возникли вопросы.
Вот сайт, куда я разместил этот слайдер
Первый момент. Текстовый блок как-то не правильно появляется из-за тогго, что я подгонял слайдер под свою картинку 750х300 px.
Второй момент. Как сделать текст гиперссылкой? Каждый кадр сопровождается своим текстом. Этот текст должен стать гиперссылкой. И желательно не перекрашивать её в синий цвет и не делать подчеркивание.
блииииииииииииинннннннннннннн а как сделать так чтобы основной блок с картинками slides скрывался под другими элементами??? пробовал через див и overflow все ровно стоит поверх
z-index не пробовали?