Добро пожаловать в учебное пособие о том, как создать простой адаптивный текстовый слайдер с использованием чистого 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 архивом.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Главные категории
Вы это смотрели
Случайные записи

Что делает структуру сайта хорошей?

Бесплатный видеокурс по основам HTML

Корпоративный блог-что это?

Как перенести сайт на новую CMS

XML Validator Buddy Desktop
Template not found: /templates/Maxs/feed.tpl