BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Как создать красивый слайдер для сайта с помощью CSS3 и HTML

Как создать красивый слайдер для сайта с помощью CSS3 и HTML

2014-10-27 / Вр:00:40 / просмотров: 18233

Если вам нужен простенький слайдер для сайта, вы попали по адресу. Предложенный мной слайдер очень прост, сделан на чистейшем CSS3 и не требует использования javascript, jQuery и др.
Простой далеко не значит никакой, слайдер имеет красивый эффект затухания, а с правой стороны выезжает текст.
Этот красивый слайдер я уже опробовал на практике для одного заказа. Заказчик был доволен.

Как создать красивый слайдер для сайта с помощью CSS3 и HTML

Итак, для начала вы можете посмотреть демонстрацию этого слайдера:

[посмотреть демонстрацию]  или [скачать исходник]

Давайте приступим к созданию слайдера и настроим его, так как мы хотим.

Для начала создайте файл «index.html», папку «images» и залейте туда четыре картинки img1.jpg, img2.jpg, img3.jpg, img4.jpg .

Как создать красивый слайдер для сайта с помощью CSS3 и HTML

Откройте 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>

Пример с картинкой:

Как создать красивый слайдер для сайта с помощью CSS3 и HTML

Увеличить картинку?

Вот так это будет выглядеть:

<!-- слайдер на блоге 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;
}

Как видите, все просто.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

42 Ответов на комментарий - Как создать красивый слайдер для сайта с помощью CSS3 и HTML

  1. Инна

    Замечательный слайдер,а можно ли сделать так, чтобы в Explorerе хотя появлялась картинка (первый слайд), так как он там не работает.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Инна, у Вас в Explorerе возможно отключен показ картинок, так как на моем Explorerе отображается последнее изображение. Попробуйте в меню браузера перейти на “Сервис”-“Свойства обозревателя”-“Дополнительно”-“Восстановить дополнительные параметры”.

    Ответить

  2. Сергий

    Здравствуйте! подскажите как убрать окно с текстом? а анимация картинок чтоб работала :oops:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Сергей!
    Достаточно убрать блок div:

    <div>Текст для слайдера #1</div>
    <div>Текст для слайдера #2</div>
    <div>Текст для слайдера #3</div>
    <div>Текст для слайдера #4</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>
    

    Ответить

  3. Владимир

    Хочу добавить больше 4 слайдеров! в код вставил код тэга , но у меня пятый слайд выходит одновременно с первым! Что нужно добавить в css что бы слайды выходили по очереди с одинаковым интервалом?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    дайте ваш код

    Ответить

    Владимир отвечает:

    на сай
    css не менял, в html вставил после pic4:

    Теплый туалет круглый год

    в целом получилось так:

    Мы Устраняем неприятный запах на участке за 24 часа

    Мы избавляем от осуждающих взглядов соседей

    Вы будете экономить на услугах ассенизатора

    У Вас будут Чистые сточные воды без запахов

    Теплый туалет круглый год

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Владимир, кода я не вижу.

    Ответить

  4. Андрей

    В браузерах Opepa и Explorer у меня почему-то не работает, а в Chrome и Firefox отлично. Причину подскажите.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Причина, нужно обновить браузеры Opepa и Explorer. У меня на всех все работает.

    Ответить

    Павел отвечает:

    Да, к сожалению не работает в IE. Пробовал на 9 и 11 IE с последними обновлениями и различными установками безопасности. В Firefox работает отлично.

    Ответить

  5. Андрей

    Здравствуйте, а как скорость поменять?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Андрей!
    В CSS строка 57, 66 – для слайдов
    строка 153, 162 – для текста

    Ответить

  6. Екатерина

    Как увеличить слайдер?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    .slides {
        height: здесь;
        width: здесь;
    }
    

    Ответить

  7. Екатерина

    Скажите, пожалуйста,а как его сделать на всю ширину экрана?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    .slides {
        height: auto;
        width: 100%;
    }
    

    Ответить

  8. Павел

    Всё просто и классно работает!
    НО!
    Пытаюсь добавить 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>
    

    Что не так?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Хммм!, Действительно, Павел, вы правы больше 4 слайдов добавить нельзя. Пытался исправить этот косяк, не получилось :sad:

    Ответить

    Павел отвечает:

    Сейчас времени нет копать. Но может дело в 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 слайдера, но все они под порядковыми номерами. Добавляем пятый слайдер вот так

    <li><img src="images/img5.jpg" title="Заголовок для изображения #5" alt="" />
     <div>Текст для слайдера #5</div>
     </li>

    Теперь чтобы он появился у нас, его нужно прописать в С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 не будут видеть слайдер. Если он привязан к стилям вашего сайта то это конечно не очень хорошо если человек не увидит его. Короче смотрите сами.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Действительно, Александр! Не внимательно мы смотрели! Спасибо за комментарий!

    Ответить

  9. Юрий

    Почему не работает ссылка? Ставишь на картинку – не работает. Ставишь на текст – не работает. Даже пробовал на div – однако тоже не работает, кто не будь может уже сталкивался ???

    Ответить

    Александр отвечает:

    Если вам нужен слайдер где ссылку в картинку можно вставить, то отпишите мне и я вышлю вам ссылку на скачивание

    Ответить

    Александр отвечает:

    мне :!:

    Ответить

    Виталий отвечает:

    и мне пожалуйста

    Ответить

  10. Карина

    Здравствуйте, не могу настроить слайдер работая в хроме. Показывает пустое белое поле в том месте где должны быть картинки :sad:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Карина!
    Проверьте путь к картинкам.

    Ответить

  11. Александр

    слайдер понравился но хочется узнать как вставить 2 слайдера разных размеров и можно поменять стиль переключения миниатюр???

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    “как вставить 2 слайдера разных размеров” – а Вы не пробовали обрезать картинки под нужный вам размер?
    Если нужно сделать больше 4 слайдов, посмотрите как это делать в комментариях выше.
    А вот здесь то я не понял – “поменять стиль переключения миниатюр”

    Ответить

  12. Александр

    ТО БИШЬ СДЕЛАТЬ РАЗНЫЕ ПЕРЕКАТЫ МЕЖДУ СМЕНОЙ КАРТИНКИ
    Я ВСТАВИЛ 20 КАРТИНОК ОДНОГО РАЗМЕРА НА СТРАНИЦУ НО НАДО ПОСТАВИТЬ ТУДА 2 СЛАЙДЕР С ДРУГИМИ РАЗМЕРАМИ :idea: :idea:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    .slides img {
        width: 200px;
    }
    

    Ответить

  13. Александр

    Здравствуйте!

    А у Вас нет в наличии слайдера, который можно самому на сайте переключать и в который можно вставлять ссылки?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Александр!
    Такого слайдер в наличие у меня нет.

    Ответить

  14. Виталий

    Т.е. на этот слайдер невозможно вставить ссылки? Чтобы каждая картинка была ссылкой?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Попробуйте.

    Ответить

    Виталий отвечает:

    че… ЕЩЕ РАЗ попробывать…? Я же спрашиваю просто… я не спец… и пробывал методом тыка мульон раз… нет так нет, жаль…

    Ответить

  15. Валерий

    Здравствуйте Степан, вставил ссылки в картинки слайдера, почему-то во всех картинках отображается ссылка из последней картинки, хотя присвоил всем 4 картинкам свою ссылку?

    Ответить

  16. Mr.Domino

    У меня такая же проблема, как и парня вверху. Вся адресация идёт к последнему слайдеру. Как исправить?

    Ответить

  17. Alex Spacon

    Спасибо за слайдер.
    Но у меня тоже возникли вопросы.
    Вот сайт, куда я разместил этот слайдер
    Первый момент. Текстовый блок как-то не правильно появляется из-за тогго, что я подгонял слайдер под свою картинку 750х300 px.
    Второй момент. Как сделать текст гиперссылкой? Каждый кадр сопровождается своим текстом. Этот текст должен стать гиперссылкой. И желательно не перекрашивать её в синий цвет и не делать подчеркивание.

    Ответить

  18. Георгий

    блииииииииииииинннннннннннннн а как сделать так чтобы основной блок с картинками slides скрывался под другими элементами??? пробовал через див и overflow все ровно стоит поверх

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    z-index не пробовали?

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 795
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4419