ZorNet.Ru — сайт для вебмастера » HTML и CSS » Автоматический слайдер изображений на CSS

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

Автоматический слайдер изображений на CSS
Здесь представлен простой слайдер в минималистичном стиле, который нужен для демонстрации картинок или изображений, где используются CSS. Где реально идет на чистом стиле, и в этом есть как плюсы так и минусы. Минусы в том, что в нем почти нем функций, только одна и главная, это показ снимков, и идет по умолчанию карусель, где нет переключателей. Плюс в том, что некоторым веб мастерам требуется слайдер именно такой, чтоб установить на отдельной страницы или на главной, где его определить в небольшой блок или вверх портала.

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

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

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

Циклическое слайд-шоу при помощи CSS

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

Слайдер минимальных изображений на CSS

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

Красивый эффект для слайдера на сайте

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

HTML

Код
<div class="slperekhodnik">

<aside class="gablok_sedakoda">
<div class="slayder_karusel">
<figure><img src="http://zornet.ru/Images/izobrazheniye/saden-1.jpg" alt=""><figcaption>Bild 1.</figcaption></figure>
<figure><img src="http://zornet.ru/Images/izobrazheniye/saden-2.jpg" alt=""><figcaption>Bild 2.</figcaption></figure>
<figure><img src="http://zornet.ru/Images/izobrazheniye/saden-3.jpg" alt=""><figcaption>Bild 3.</figcaption></figure>
<figure><img src="http://zornet.ru/Images/izobrazheniye/saden-4.jpg" alt=""><figcaption>Bild 4.</figcaption></figure>
<figure><img src="http://zornet.ru/Images/izobrazheniye/saden-5.jpg" alt=""><figcaption>Bild 4.</figcaption></figure>
</div>
</aside>
   
</div>


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%;
}

20%{
left: 0%;
}

25%{
left: -100%;
}

45%{
left: -100%;
}

50%{
left: -200%;
}

70%{
left: -200%;
}

75%{
left: -300%;
}

95%{
left: -300%;
}

100%{
left: -400%;
}

}

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

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

Демонстрация
31 Января 2019 Загрузок: 5 Просмотров: 8644 Комментариев: (10)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 10
noavatar
nicejuicypeach 09 Мая 2020 14:151
0
Добрый день, все хорошо, слайдер отлично работает, но есть одна проблемка. В моем слайдере 3 картинки, и, когда они пролистываются, появляется белый экран, затем все продолжает нормально работать и так каждый цикл. Не подскажете, в чем проблема?
Kosten
Kosten 09 Мая 2020 17:262
0
Там возможно битая ссылка была или вообще ее не было, потому и пробел. Сейчас все проверил, и выставлено 5 изображений, что показывает все корректно, но на самом крайнем идет почему то быстрый переход.
-SAM-
-SAM- 16 Декабря 2021 08:0110
0
Там в коде идёт два раза Bild 4. и нарушено процентное соотношение (видимо, кто-то из меньшего числа картинок переделывал).
Вот я проверил и пришёл к выводу, что для 5 картинок так нужно:
Код
@keyframes gablok_sedakoda-ani{
0%{
left: 0%;
}

5%{
left: 0%;
}

10%{
left: 0%;
}

15%{
left: 0%;
}

20%{
left: -100%;
}

25%{
left: -100%;
}

30%{
left: -100%;
}

35%{
left: -100%;
}

40%{
left: -200%;
}

45%{
left: -200%;
}

50%{
left: -200%;
}

55%{
left: -200%;
}

60%{
left: -300%;
}

65%{
left: -300%;
}

70%{
left: -300%;
}

75%{
left: -300%;
}

80%{
left: -400%;
}

85%{
left: -400%;
}

90%{
left: -400%;
}

95%{
left: -400%;
}

100%{
left: 0%;
}

}
Будет последняя картинка видна, а при достижении конца - идёт перелистывание к первой (а не сразу вывод), как и более плавно, а не скачками. Можно еще скорость с 8s до 10s увеличить.
-SAM-
-SAM- 10 Мая 2020 01:003
0
Нужно пробовать менять соотношение процентной составляющей в keyframes.
sushidomeisk
sushidomeisk 12 Августа 2020 10:564
+1
Скажите, как установить большее количество картинок?
zoff74
zoff74 25 Февраля 2021 15:266
0
<!--ВЕРХНИЙ РЕКЛАМНЫЙ КОНТЕЙНЕР-->
<div id="topreklama">
<a href="#"><div id="topreklama1">РЕКЛАМА 1</div></a>
<a href="#"><div id="topreklama2">РЕКЛАМА 2</div></a>
<a href="#"><div id="topreklama3">РЕКЛАМА 3</div></a>
<a href="#"><div id="topreklama4">РЕКЛАМА 4</div></a>
<a href="#"><div id="topreklama5">РЕКЛАМА 5</div></a>
<a href="#"><div id="topreklama6">РЕКЛАМА 6</div></a>
......
<a href="#"><div id="topreklama20">РЕКЛАМА 20</div></a>
</div>
<!--КОНЕЦ ВЕРХНЕГО РЕКЛАМНОГО КОНТЕЙНЕРА-->
Свояк
Свояк 15 Декабря 2021 22:558
0
Подскажите что надо заменить чтобы больше Пяти картинок было. Если больше 5 то они накладываются. ((
Спасибо.
-SAM-
-SAM- 16 Декабря 2021 07:049
0
По логике width: 500% - 5 картинок по 100%, значит добавлять на сколько у вас там картинок. Где идёт width: 20%, то нужно будет уменьшать (почему именно 20% сейчас там? 100% деленное на 5 равно столько).
После еще начнутся проблемы с анимацией (ранее уже спрашивали, то тоже нужно как-то процентное соотношение менять в keyframes).
Ну и когда картинок будет больше, то время на их перелистывание тоже нужно больше (менять продолжительность анимации - сейчас 8s), иначе за то же время будет крутить - меньше времени будет отведено на задержку-показ каждой из них.
zoff74
zoff74 25 Февраля 2021 15:265
0
ДЕЙСТВИТЕЛЬНО ГЕНИАЛЬНО И ПРОСТО!
Kosten
Kosten 25 Февраля 2021 16:187
0
С вами согласен, что просто, но здесь нужно добавить, что он еще корректно выводит на мобильные аппараты. Но и скорость немного сбавить, слишком он вертает кадры.
Войдите:
avatar