Как сделать автоматический слайдер на сайте html css

body <
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
height: 100vh;
background: #e3f9f6;
>

.karusel_snimka <
border-radius: 5px;
overflow: hidden;
width: 712px;
height: 364px;
border: 7px solid white;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
>

.karusel_shoumev <
width: 500%;
height: 364px;
display: flex;
>

.karusel_shoumev input <
display: none;
>

.sekus <
width: 20%;
transition: 2s;
>

.sekus img <
width: 712px;
height: 364px;
>

.rukovodstvo_navigats <
position: absolute;
display: flex;
justify-content: center;
width: 712px;
margin-top: -40px;
>

.manual-btn <
border-radius: 8px;
cursor: pointer;
transition: 1s;
border: 2px solid #459ac1;
padding: 5px;
width: 42px;
box-shadow: 1px 1px 5px 0px rgb(70 67 67 / 63%), 0px 0px 3px 0px rgb(40 37 37 / 60%);
>

.manual-btn:not(:last-child) <
margin-right: 40px;
>

.manual-btn:hover <
background: #dd7a15;
>

#radio1:checked ~ .first <
margin-left: 0;
>

#radio2:checked ~ .first <
margin-left: -20%;
>

#radio3:checked ~ .first <
margin-left: -40%;
>

#radio4:checked ~ .first <
margin-left: -60%;
>

/*css for automatic navigation*/

.navigation-auto <
position: absolute;
justify-content: center;
margin-top: 460px;
display: flex;
width: 800px;
>

.automobile-sliv div <
border-radius: 8px;
transition: 1s;
border: 2px solid #f3b03a;
padding: 5px;
width: 30px;
>

.automobile-sliv div:not(:last-child) <
margin-right: 40px;
>

#radio1:checked ~ .automobile-sliv .auto-btn1 <
background: #d8f33a;
>

#radio2:checked ~ .automobile-sliv .auto-btn2

#radio3:checked ~ .automobile-sliv .auto-btn3 <
background: #d8f33a;
>

#radio4:checked ~ .automobile-sliv .auto-btn4 <
background: #d8f33a;
>

var counter = 1;
setInterval(function() <
document.getElementById(‘radio’ + counter).checked = true;
counter++;
if(counter > 4) <
counter = 1;
>
>, 5000);

На этом установка завершена!

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

Автоматический слайдер изображений на CSS

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

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

При заходе на ресурс или открытие новой страницы, он в реальности так выглядит.

Здесь больше подходит к планшету, или смартфону.

Это уже с не очень большим экраном, что может вывести снимки.

Приступаем к установке регулярно обновляемой подборке слайдеров интернет площадки.

* <
margin: 0;
padding: 0;
box-sizing: border-box;
>

body <
background: #fff;
margin: 2em;
>

.slperekhodnik <
max-width: 38em;
margin: 0 auto;
width: 100%;
>

.gablok_sedakoda <
width: 100%;
margin: 0 auto;
overflow: hidden;
>

.slayder_karusel <
position: relative;
width: 500%;
font-size: 0;
animation: 8s gablok_sedakoda-ani infinite;
>

.slayder_karusel figure <
width: 20%;
height: auto;
display: inline-block;
position: inherit;
>

.slayder_karusel img <
max-width: 100%;
vertical-align: bottom;
>

.slayder_karusel img:hover <
filter: grayscale(90%);
>

.slayder_karusel figure figcaption <
position: absolute;
font-family: ‘Roboto’;
font-size: 1.4rem;
font-weight: 100;
text-transform: uppercase;
bottom: 0;
background: rgba(0,0,0,0.6);
color: #fff;
width: 100%;
padding: .5em;
>

@keyframes gablok_sedakoda-ani <
0% <
left: 0%;
>

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

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

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

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

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

HTML разметка

CSS оформление

.container_slider_css{margin:50px auto;width:500px;height:300px;overflow:hidden;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:12s} img:nth-child(2){animation-delay:8s} img:nth-child(3){animation-delay:4s} img:nth-child(4){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} }

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

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

HTML разметка

CSS оформление

.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em} .slider_picture:before{background-color:#22130c;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:'';left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1} .slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:'';left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1} .slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute} .slider_picture input{display:none} .slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10} .slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em} .slider_picture:hover label{opacity:1;visibility:visible} .slider_picture input:checked + label{background-color:#fff} .slider_picture:hover li:nth-child(1) label{left:.5em} .slider_picture:hover li:nth-child(2) label{left:2em} .slider_picture:hover li:nth-child(3) label{left:3.5em} .slider_picture:hover li:nth-child(4) label{left:5em} .slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden} .slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}

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

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

СЛАЙД-ШОУ на HTML

О важности умения создавать и добавлять на сайт слайд-шоу, писал уже на предыдущей странице. Аналогично, и о причинах его чрезвычайной популярности. Незачем повторяться.
Кто не был, могут вернуться, кликнув по верхней синей стрелке.

Там Вы видели слайдеры, созданные с помощью технологий jQuery.

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

Чем интересные?
Хотя бы тем, что они создаются просто! БЕЗ использования каких-либо скриптов и сложных языков программирования.

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

Простые слайд-шоу на HTML

Одна из причин, почему мне так нравятся именно базовые технологии интернета — возможность сделать с их помощью, практически, ВСЁ! Причём, они оставляют программный код страницы лёгким, чего не скажешь о jQuery!

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

СЛАЙД-ШОУ №1 «бегущие домики»

Посмотрели?
Разумеется, оно гораздо скромнее, чем те, что показывал на предыдущей странице, но и программный код её — лёгкий, «мизерный»!

Почему это так важно?!
Об этом подробно и наглядно рассказал на странице «Современные технологии».

А здесь, ниже, покажу ещё одну из возможностей создать простое слайд-шоу на своём сайте, программируя исключительно на HTML.

СЛАЙД-ШОУ №2 «фотошоп-домики»

Ну, и как?
Вроде, всё то же самое? . . Всё, да не всё!
Здесь программный код ещё легче, благодаря тому, что в «бегущей строке» используется всего 1 рисунок , сделанный в фотошоп.
Техника же создания самого слайд-шоу, действительно, та же самая, что и у верхнего.

Что означает «бегущая строка»? Можете посмотреть ЗДЕСЬ: (откроется в новом окне) .

Простое слайд-шоу с анимацией

Если же подключить к возможностям базовых технологий ещё и фотошоп, вообще здорово получится! Никакие скрипты не нужны.
Посмотрите простой слайдер, созданный на языке HTML, без скриптов, всего лишь с добавлением элементов фотошоп.

СЛАЙД-ШОУ №3 «бегущие домики и анимация»

Показал самый простой способ сделать слайд-шоу с анимацией, позволяющий обойтись БЕЗ всяких сложных технологий.

Сами понимаете — не стал особо «усердствовать» в фотошоп. Главное — показал принцип.

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

К чему такое приводит, Вы, наверное, уже читали выше, пройдя по ярко выделенной ссылке. Нет? Повторю её: «Современные технологии».

О простых способах создания слайдеров

Хочу совсем немного добавить к тому, что есть на предложенной к просмотру странице. Там я об этом не говорил. Вообще, на сайте нигде не писал об этом.

Простые способы создания слайдеров, галерей, различных эффектов хороши тем, что они не «насилуют» компьютер. Знаю, о чём говорю.

Если обычные HTML+CSS для него безобидны , то скрипты — совсем наоборот!

Ведь, скрипты — это программы. А операционная система любого компьютера, его «душа» , так сказать, и сама есть — программа.

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

Заключение

** Надеюсь, и на этой странице Вы нашли для себя интересную информацию о том, как можно просто создать слайд-шоу для сайта.

Кроме того, что Вы видели здесь, посмотрите ещё один очень-очень интересный способ создания автоматических презентаций БЕЗ использования каких-либо скриптов. Лишь только HTML+CSS! Вот он. Оцените! «Автоматический слайдер CSS» (откроется в новом окне) .

Желающие узнать об использовании простых веб-технологий для добавления галерей на свой сайт, посетите страницу «Галерея» (откроется в новом окне) .

Аналогично. Очень простой способ создания всевозможных галерей рисунков для сайта найдёте на странице «Просмотрщик изображений» (откроется в новом окне) .

Кого занимает возможность размещения мультимедийного контента на ресурсе, тем будет интересна страница «Аудио и Видео» (откроется в новом окне) .

Посетителям, кому нужно создать слайд-шоу, либо галерею на сайте, подключить аудио и видео к нёму, но нет времени самостоятельно заниматься этим, способен помочь раздел «Выбор исполнителя» (откроется в новом окне) .

Не пугайтесь такого количества навигационных стрелок. Так нужно.

Сделал прямой заход на эту страницу из четырёх БОЛЬШИХ разделов. Вернуться также можно прямо. Наведите курсор мыши на стрелки — появятся подсказки, куда они ведут.
Кликнув по верхнему логотипу, попадёте на «Главную».

Все права защищены. Copyright © 2009 — Коротеев Владимир.