Слайдер с адаптивным CSS без Javascript
Сейчас сложно тематические сайты представить без слайдера, как игрового направления, или просто интернет магазин с примоткой кадра с помощью CSS. Преобразите свой веб-сайт с помощью привлекательных слайдеров CSS, или просто улучшите свой веб-дизайн с помощью плавных переходов, адаптивных макетов и настраиваемых стилей. Как пример, данный слайдер, который выполнен на чистом CSS3, где нет не скриптов или библиотек, все выполнено на чистом коде. Но главный плюс у него, он корректно выводит кадры изображения, и что главное, это на всех мобильных аппаратах его можно наблюдать, так как он по умолчанию идет адаптивным под мобильные устройства. От других он отличается тем, что мы ссылке не в самом каркасе прописываем, а нам нужно их поставить в закрепленном CSS. И там уже выставлено на 5 картинок, где их нужно будет по кнопке перематывать, а сами стрелки окажутся по сторонам. Здесь нет автоматики, а значит перемотка может осуществляется только в ручном режиме. Данный слайдер корректно смотрится как на широком экране во всю страницу, так и в блоке, к примеру под шапкой или в самой шапке. С помощью этого слайда за считанные минуты вы можете создать потрясающий вид стилистики тематического ресурса. Так он выглядит после установочного процесса: Установка: HTML Код <input type="radio" id="kamilad1" name="slider"> <label for="kamilad1"><span class="sr-only">Это английская версия Arena Breakout с двумя клиентами: базовым и облегченным. Об их разнице читайте в отдельной статье.</span></label> <div class="asetda slaid1"></div> <input type="radio" id="kamilad2" name="slider" checked autofocus> <label for="kamilad2"><span class="sr-only">Мы считаем, что это сохранит консольную графику основного клиента, в то же время позволяя игрокам с бюджетными смартфонами.</span></label> <div class="asetda slaid2"></div> <input type="radio" id="kamilad3" name="slider"> <label for="kamilad3"><span class="sr-only">Ваша задача в Arena Breakout не уничтожить как можно больше соперников, а быстрее их найти ценные предметы и эвакуироваться вместе с ними через заранее обозначенные точки.</span></label> <div class="asetda slaid3"></div> <input type="radio" id="kamilad4" name="slider"> <label for="kamilad4"><span class="sr-only">Разумеется, чем сложнее локация и выше требования к игрокам, тем ценнее награда.</span></label> <div class="asetda slaid4"></div> <input type="radio" id="kamilad5" name="slider"> <label for="kamilad5"><span class="sr-only">Полученный товар можно будет продать на рынке, но если вы умрете, то потеряете всю добычу.</span></label> <div class="asetda slaid5"></div> CSS Код .sr-only { position: absolute; pointer-events: none; width: 1px; height: 1px; overflow: hidden; color: transparent; } input { position: absolute; opacity: 0; margin-top: 95vh; cursor: pointer; } label { display: inline-block; width: 12px; height: 12px; border: solid 2px white; border-radius: 999px; background-color: transparent; margin: 95vh 6px 0 6px; z-index: 2; cursor: pointer; transition-duration: .4s; box-shadow: 0 0 20px 0 #000; } input:checked + label{ background-color: white; } input + label::after{ content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' style='fill:white'%3E%3Cpath d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center 55%; background-size: 80px 80px; line-height: 100vh; transition: background-size 200ms; position: absolute; color: white; height: calc(95vh - 12px); width: 80px; top: 0; left: 0; z-index: 20; } input + label:hover::after { background-size: 90px 90px; } input:checked + label::after { background-image: none; width: 100vw; left: 0; z-index: 10; } input:checked + label + .asetda ~ input + label::after { display: none; } input:checked + label + .asetda + input + label::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' fill='white'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z' /%3E%3C/svg%3E"); display: block; width: 80px; right: 0; left: auto; } input:focus + label{ box-shadow: 0 0 0 2px teal, 0 0 18px white; } .asetda { position: absolute; background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; transform: translateX(-100%); transition-duration: .4s; opacity: 1; } input:checked ~ .asetda { transform: translateX(100%); } input:checked + label + .asetda { transform: translateX(0); opacity: 1; } .slaid1{ background-image: url(ссылка на изображение html #1); } .slaid2{ background-image: url(ссылка на изображение html #2); } .slaid3{ background-image: url(ссылка на изображение html #3); } .slaid4{ background-image: url(ссылка на изображение html #4); } .slaid5{ background-image: url(ссылка на изображение html #5); } Здесь можно сказать, что данный слайд идет как исключительный дизайн, который еще предоставляет информацию, а плюс его заключается в том, что он идеально подходит для любой маркетинговой кампании, ориентированной как на пользователя, так и на имидж. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |