• Главная
  • Карта сайта
Не найдено

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

Опубликовано: 06.09.2018

Если вам нужен простенький слайдер для сайта, вы попали по адресу. Предложенный мной слайдер очень прост, сделан на чистейшем 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; }

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

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

Последние новости категории:

Похожие статьи

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

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

Метки: для сайта , слайдер , эффекты для сайта

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss