ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер на весь экран при помощи HTML + CSS

Слайдер на весь экран при помощи HTML + CSS

Отличное решение на простой адаптивный слайдер для сайта, который создан при участии чистого CSS, где по умолчанию настроен на всю ширину экрана. Вам только остается выставить в необходимое место html код слайдера и прописать стили. После поставить изображение, где изначально настроено на 3 снимка, но вы можете прописать то количество, которое вам нужно. Больше всего вы уже встречали такую функцию слайда. Ведь по своей структуре он отлично подходит под шапку, которая выполнена вверх блога или сайта.

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

С проверочного тестирование:

Слайдер на всю ширину на чистом CSS + HTML

Установка:

HTML

Код

CSS

Код

.aperekoden_slayda{
height: 100%;
width: 100%;
position: fixed;
}

.aperekoden_slayda .smena_slada{
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}

.aperekoden_slayda .smena_slada .asnapoka{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

.aperekoden_slayda .smena_slada .asnapoka:nth-child(1){
-webkit-animation: sliderFade-1 15s linear infinite;
animation: sliderFade-1 15s linear infinite;
}

.aperekoden_slayda .smena_slada .asnapoka:nth-child(2){
-webkit-animation: sliderFade-2 15s linear infinite;
animation: sliderFade-2 15s linear infinite;
}

.aperekoden_slayda .smena_slada .asnapoka:nth-child(3){
-webkit-animation: sliderFade-3 15s linear infinite;
animation: sliderFade-3 15s linear infinite;
}

@-webkit-keyframes sliderFade-1{
0%{
opacity: 1 }

15%{
opacity: 1 }

30%{
opacity: .5 }

45%{
opacity:0 }

60%{
opacity:0 }

75%{
opacity:0 }

90%{
opacity:0 }

100%{
opacity:1 }

}

@-webkit-keyframes sliderFade-2{
0%{
opacity: 0 }

15%{
opacity: 0 }

45%{
opacity: 1 }

60%{
opacity: 1 }

75%{
opacity: 0 }

90%{
opacity: 0 }

100%{
opacity: 0 }

}

@-webkit-keyframes sliderFade-3{
0%{
opacity: 0 }

15%{
opacity: 0 }

30%{
opacity: 0 }

45%{
opacity: 0 }

60%{
opacity: 0 }

75%{
opacity: 1 }

90%{
opacity: 1 }

100%{
opacity: 0 }

}

Не забываем, если вы установку производите на чистой страницы, то по ширине и высоте слайд займет все место. Где нужно создать простой корпус html, там вы задаете данные, и после чего, он аккуратно в этом корпусе размещается.

За пример можно взять шапку, где меняются картинки, что были прописаны под ссылками. И смотря на скрин при проверке, то видно, что на большом и малом экране, изображение остается корректным.

Демонстрация

27 Апреля 2021 Загрузок: 2 Просмотров: 2827 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0