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

Удивительный адаптивный CSS слайдер

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

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

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

Так же проверен на работоспособность по всему функционалу:

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

HTML

Код

CSS

Код

.neludocamen {
  margin: 0 auto !important;
  box-shadow: none !important;
  width: 100% !important;
}

.neludocamen {
  width: 815px;
  max-width: 100%;
  margin: 10px auto;
  background: transparent;
  box-shadow: 0px 0px 5px 1px #a5a0a0;
  overflow: hidden;
  position: relative;
  transition: 0.2s all;
}

.neludocamen .sepnsivu-donsnelu {
  position: absolute;
  left: 0;
  transform: scale(1.1);
  top: 0;
  width: 100%;
  height: auto;
  display: inline-block;
  opacity: 0;
  transition: 0.5s all;
}

.neludocamen .ESlider-active-slide {
  opacity: 1;
  left: 0;
  transform: scale(1);
}

.neludocamen .sponsive-bsgonelus-container {
  position: absolute;
  bottom: -30px;
  opacity: 0;
  transition: 0.3s all ease-out;
  width: 100%;
  text-align: center;
}

.neludocamen:hover .sponsive-bsgonelus-container {
  opacity: 1;
  bottom: 10px;
}

.neludocamen .sponsive-bsgonelu {
  display: inline-block;
  height: 10px;
  width: 10px;
  background: transparent;
  border: 1px solid #fdfbfb;
  box-shadow: 0px 0px 1px 1px #716f6f, 0px 0px 1px 1px #716f6f inset;
  position: relative;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.5s all ease-out;
}

.neludocamen .sponsive-bsgonelu:hover, .neludocamen .ESlider-active-bulk {
  background: #fdfbfb !important;
  box-shadow: 0px 0px 1px 1px #827e7e !important;
}

.neludocamen .sponsive-bsgonelu .ESlider-thumbnail
{
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: 100%;
  height: 50px;
  border: 2px solid #fdfbfb;
  box-shadow: 0px 0px 2px 1px #827e7e;
  transition: 0.3s all;
}

.neludocamen .sponsive-bsgonelu:after{
  content: '';
  display: block;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  bottom: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #FFF;
  margin-bottom: -10px;
  transition: 0.3s all;
}

.neludocamen .sponsive-bsgonelu:hover .ESlider-thumbnail, .neludocamen .sponsive-bsgonelu:hover:after {
  visibility: visible;
  opacity: 1;
  margin-bottom: 10px;
}

.neludocamen .sponsive-bsgonelu:hover:after{
  margin-bottom: 0;
}

.neludocamen .povaneg-saponsuv, .neludocamen .lodeanug-masipon {
  position: absolute;
  top: 0;
  height: 100%;
  width: 10%;
  background: rgba(0,0,0,0.1);
  transition: 0.3s all;
}

.neludocamen .povaneg-saponsuv:before, .neludocamen .povaneg-saponsuv:after, .neludocamen .lodeanug-masipon:before, .neludocamen .lodeanug-masipon:after {
  content: '';
  display: block;
  position: absolute;
  height: 20px;
  width: 2px;
  background: #fdfbfb;
  top: 50%;
  margin-top: -10px;
}

.neludocamen .povaneg-saponsuv:before { transform: rotate(45deg) translateY(-50%); }
.neludocamen .povaneg-saponsuv:after { transform: rotate(-45deg) translateY(50%); }

.neludocamen .lodeanug-masipon:before { transform: rotate(-45deg) translateY(-50%); }
.neludocamen .lodeanug-masipon:after { transform: rotate(45deg) translateY(50%); }

.neludocamen .povaneg-saponsuv:before, .neludocamen .povaneg-saponsuv:after {
  left: 50%;
  margin-left: -10px;
}

.neludocamen .lodeanug-masipon:before, .neludocamen .lodeanug-masipon:after {
  right: 50%;
  margin-right: -10px;
}

.neludocamen .povaneg-saponsuv:hover, .neludocamen .lodeanug-masipon:hover { background: rgba(0,0,0,0.3); }
.neludocamen .povaneg-saponsuv { left: -10%; }
.neludocamen .lodeanug-masipon { right: -10%; }
.neludocamen:hover .povaneg-saponsuv { left: 0; }
.neludocamen:hover .lodeanug-masipon { right: 0; }

Код

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

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

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

07 Ноября 2019 Загрузок: 6 Просмотров: 1099 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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