Как создать слайдер в html css

Интересный и одновременно простой слайдер на чистом CSS3

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

Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».

2. Оформляем слайдер

Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать.

С оформлением фона и общими стилями всё понятно.

Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.

Радио-кнопки скрываем. Они нам понадобятся позже.

Результат на данный момент такой:

image

3. Оформляем слайды

Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:

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

image

4. Делаем навигацию по слайдам

Так как радио-кнопки скрыты и нужны нам как переключатели, оформляем подготовленные лейблы:

Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:

image

5. Учим кнопки нажиматься

Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:

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

image

6. Оживляем слайдер

Ну, а теперь делаем так, чтобы слайды наконец-то переключались:

В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.

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

Результат можно посмотреть здесь: демка слайдера.

Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.

Как сделать слайдер с помощью animation и keyframes? HTML и CSS

Слайдер из 8 картинок. Нужно, чтоб автоматически каждая картинка 3 секунды стояла на месте и листалась в течение 2 секунд. И так 8 раз. Здесь нужно правильно прописать код
@keyframes slider, но не знаю как правильно.

Получилось. 3 секунды картинка стоит на месте, за 2 секунды перелистывается.

3 / 40 x 100 = 7.5

0% + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 = 100%

Поправлены два селектора CSS на следующее:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css анимация слайдер или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Подборка слайдеров для сайта на чистом CSS

Подборка слайдеров для сайта на чистом CSS

ВСЕ СЛАЙДЕРЫ В ПРИМЕРАХ РАБОТАЮТ БЕЗ СКРИПТОВ. Для установки любого слайдера на свой сайт нужно скопировать HTML разметку и CSS:

Пример 1: Маленький слайдер с автоматической прокруткой фото

Это самый простой слайдер без возможности самостоятельного скроллинга фотографий. Рекомендуемый размер изображений 500x300px.

Маленький слайдер с автоматической прокруткой фотоПример слайдера 1

Скачать пример 1

HTML разметка
CSS оформление

Пример 2: Слайдер, стилизованный под рамку картины

Рекомендуемый размер изображений 400x300px. Слайдер отображается ровно по центру страницы. Адаптива под мобильные устрайства — нет. Если вы новичок в веб, то корректно установить данный слайдер себе на сайт будет проблематично из-за абсолютного позиционирования. Используются тени (box-shadow). Есть возможность самостоятельно скроллить фото. Radio кнопки для прокрутки изображений появляются при наведении мышки.

Слайдер, стилизованный под рамку картины

Скачать пример 2

HTML разметка
CSS оформление

Пример 3: Обычный слайдер со стрелками — вперед и назад

Рекомендуемый размер изображений 960x640px. Слайдер полностью адаптирован под мобильные устройства. Есть возможность подписывать названия слайдов. Для отображения стрелочек — вперед и назад, — используется стандартный набор иконок font-awesome. На мой взгляд этот слайдер самый оптимальный.

Слайдер 1

Слайдер 2

Слайдер 3

Слайдер 4

Код слишком большой, поэтому не выкладываю его. Скачивайте пример.

Скачать пример 3

Пример 4: Слайдер с простой анимацией

Рекомендуемый размер изображений 610x420px. Адаптива нет! Слайдер имеет огромные стрелочки — вперед и назад. Используется анимация, будто картинка падает вниз.

слайдер на css с просто анимацией

Код этого слайдера большой, поэтому не выкладываю его. Скачивайте пример.

Скачать пример 4

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?
Похожие статьи:

Комментарии ( )

Подскажите пожалуйста, не могу никак решить этот вопрос, мне надо первый слайдер который автоматически меняет слайды, но если я добавлю 8 картинок то они не работают как надо и наслаиваются друг на друга, как можно этот вопрос решить? Вроде бы делал по аналогии не не вышло 🙁

.container_slider_css{height:300px;position:relative}
.photo_slider_css{position:absolute;animation:round 16s infinite;opacity:0;width:100%}
@keyframes round {
25%{opacity:1}
40%{opacity:0}
}
img:nth-child(1){animation-delay:28s}
img:nth-child(2){animation-delay:24s}
img:nth-child(3){animation-delay:20s}
img:nth-child(4){animation-delay:16s}
img:nth-child(5){animation-delay:12s}
img:nth-child(6){animation-delay:8s}
img:nth-child(7){animation-delay:4s}
img:nth-child(8){animation-delay:0}
@media(min-width:0px) and (max-width:320px) {
.container_slider_css{width:80%;height:190px}
}
@media(min-width:321px) and (max-width:480px) {
.container_slider_css{width:80%;height:190px}

Алексей Власов 29 декабря 2019, 22:58 # ↑ ↓ 0

Здравствуйте, я использовал ваш пример для 8 картинок и у меня нет проблем с наслаиванием друг на друга. Вот архив, если это как-то поможет:

Алексей Власов 30 декабря 2019, 22:17 # ↑ ↓ 0

Да, но там мне на другом сайте подсказали, если картинок больше тогда надо вот этот параметр менять
25%{opacity:1}
40%{opacity:0}

и время round 16s поменять на 32s так как шаг идет 4 секунды. А это полный перезапуск этого движения. И получается накладывалась картинка на 16 секунде 1 изображения на 5 и так далее.

Алексей Власов 30 декабря 2019, 22:23 # ↑ ↓ +1

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *