Простой адаптивный текстовый слайдер Pure CSS

Добро пожаловать в учебное пособие о том, как создать простой адаптивный текстовый слайдер с использованием чистого CSS. 

Надоели эти сложные слайды, требующие дополнительных библиотек? Почему бы не создать свой собственный? 

Текстовые слайдеры Pure CSS на самом деле довольно просты, и это небольшое руководство поможет Вам создать простой слайдер текста – читайте дальше!

Адаптивный текстовый слайдер Pure CSS 

Хорошо, давайте не будем лить много воды в статье, а сразу начнем с описания горизонтального текстового слайдера (который прокручивается справа налево). 

HTML очень прост, просто разместите слайды между  <div> контейнерами.

<div class="hwrap"><div class="hmove">
  <div class="hslide">
    <h3>Слайд 1</h3>
    <p>Здесь мы разместим наш первый слайд!</p>
  </div>
  <div class="hslide">
    <h3>Слайд 2</h3>
    <p>Здесь будет описание второго CSS слайда.</p>
  </div>
  <div class="hslide">
    <h3>Слайд 3</h3>
    <p>Ну а в этом месте напишем третий слайд.</p>
  </div>
</div></div>

Здесь приведу описание блоков , и какой блок за что отвечает в html коде слайдера.

<div class="hwrap"> является основным контейнером, это “фиксированная видимая область на экране”.
<div class="hmove"> это “вторичный контейнер”, в котором мы будем применять анимацию CSS для сдвига слайдов.
<div class="hslide"> это отдельные слайды, которые будут вытеснены в длинный горизонтальный ряд с помощью CSS.

Теперь нам с Вами надо применить стили для слайдера, копируем код CSS который находится внизу.

.hwrap {
  width: 100%;
  height: 150px; /* OPTIONAL */
 background: #fffdea;
  border: 2px solid #ffcf1f;
  overflow: hidden; /* HIDE SCROLLBARS */
}
.hmove {
  display: flex;
  position: relative;
  top: 0; right: 0;
}
.hslide {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 10px;
}


@keyframes slideh {
  
  0% { right: 0; }
  33% { right: 100%; }
  66% { right: 200%; }
  100% { right: 0; }
 
  
  0% { right: 0; }
  30% { right: 0; }
  33% { right: 100%; }
  63% { right: 100%; }
  66% { right: 200%; }
  97% { right: 200%; }
  100% { right: 0; }
}
.hmove { animation: slideh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }

Это выглядит несколько необычно, но вся идея состоит в том, чтобы выложить стороны в горизонтальный ряд, а затем использовать анимацию CSS для их поворота.

.hwrap это фиксированная видимая область на экране. 

Важными частями здесь являются настройка размера с width: 100% помощью и 

использование overflow: hidden для скрытия уродливых полос прокрутки.

Затем выложим все слайды в длинный горизонтальный ряд.

Установим .hmove  значение display: flex.
width: 100% и flex-shrink: 0on 

.hslide ставит все слайды в одну строку.

Наконец, разберемся с движением слайда с помощью анимации CSS.

Установим .hmove значение  position: relative – это необходимо для сдвига слайдов.
Да, некоторые из вас, возможно, уже догадались – мы создаем последовательность 
@keyframesс разными right: N% для движения слайдов.
Наконец, мы просто прикрепляем ключевые кадры .hmove, и это все.

 ДОБАВЛЕНИЕ И УДАЛЕНИЕ СЛАЙДОВ Pure CSS 

Как вы, возможно, уже видели, для добавления или удаления слайдов потребуется немного “вычислений”.

HTML - это не такая уж большая проблема, просто добавьте или удалите

<div class="hslide">.
Не очень удобная часть связана с CSS, где вам нужно будет обновить

@keyframes slideh.
Пересчитайте соответствующим @keyframes образом. 

Поэтому, если у вас всего 4 слайда, я рекомендую останавливаться на каждом 

100% / 4 = 25%. 

Это:
0 - right: 0
25% - right: 100%
50% - right: 200%
75% - right: 300%
100% - right: 0
Затем просто добавьте промежуточные паузы.
20% - right: 0
45% - right: 100%
70% - right: 200%
95% - right: 300%
Наконец, вы также можете настроить время анимации для ускорения или 

замедления – .hmove { animation: ... 20s ... }

Картинка-пример работы нашего текстового слайдера. (Стрелки сюда не входят) 

Вот мы и закончили создание простого слайдера текста на CSS. Можете скачать CSS,HTML архивом.