ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Удобный адаптивный слайдер на JS + CSS

Удобный адаптивный слайдер на JS + CSS

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

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

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

Так смотрится на одном из гаджет:

Установочный процесс:

Нужно в HEAD на страницах установить

Код

HTML

Код

CSS

Код

body {
  margin: 0;
  padding: 0;
  background: #0c0c0c;
  height: 100%;
}
.anemun-sadseons{
  position: relative;
  display: block;
  overflow: hidden;
}
figure{
  position: absolute;
  opacity: 0;
  transition: 1s opacity;
}
figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #eeeeef;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
}
figcaption a{
  color: #eeeeef;
}
figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #eeeeef;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
p{
  margin: 10px 20px;
  color: #eeeeef;
}
a{color:#eeeeef;}

Код

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

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

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

23 Декабря 2019 Загрузок: 3 Просмотров: 1260 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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