Слайдер на CSS slider для текста вашего сайта

Слайдер на CSS slider для текста вашего сайта

Дизайн студия «Движок» дорабатывала сайт нашего заказчика. требовалось сделать — слайдер текста. А именно: слайдер текста отзывов на сайте. В данной небольшой статьи мы опубликуем данное решение. Слайдер контента работает на чистом css.

Приступаем к разметки.
Html часть — ротатора контента:
<div id="slider">
<ul>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
</ul>
</div>

А теперь Css часть слайдера:

Скорость смены слайдов — меняется в: 55s

#slider ul
{
-webkit-animation: slide-animation 55s infinite;
}

Источник данного решения вот
Пример нашего решения вот

Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.сетях через сервис ниже.

Отправить ответ

Please Login to comment
Войти с помощью: 
  Subscribe  
Notify of
Authorization
*
*
Войти с помощью: 
Registration
*
*
*
Войти с помощью: 

18 + eighteen =

Password generation