» »

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

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

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

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

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

Адаптивный слайдер на CSS3 для сайта

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

HTML

Код
<div id="keponsuved"></div>

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

JS

Код
window.onload = function() {
  var slider = new ESlider("#keponsuved", [
  "http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/masredum.jpg",
  "http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/kitredsan.jpg",
  "http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/ksavoda.jpg",
  "http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/masdetes.jpg",
  "http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/loprees.jpg",
  "http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/gtsanoda.jpg",
  "http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/asum.jpg"
  ]);
}

var ESlider = function(slider, images) {
  /* Функция: Получить элемент по селектору */
  var _ = function(selector) {
  return document.querySelector(selector);
  }

  var __ = function(selector) {
  return document.querySelectorAll(selector);
  }

  /* Объявите переменные класса */
  this.slider = _(slider);
  this.images = images;
  this.slides = "";
  this.currentSlide;

  /* Добавить класс neludocamen в слайдер */
  this.slider.classList.add("neludocamen");

  /* Создать слайды */
  this.slides = "";
  this.bulks = "<div class='sponsive-bsgonelus-container'>";
  this.images.forEach(function(image, index) {
  this.slides += "<img class='sepnsivu-donsnelu sepnsivu-donsnelu-" + (index + 1) + "' src='" + image + "' />";
  this.bulks += "<span class='sponsive-bsgonelu' data-slide-id='"+ (index+1) + "'><img src='" + image + "' class='ESlider-thumbnail' /></span>";
  }.bind(this));

  /* Установить слайды */
  this.bulks += "</div>";
  this.contronls = "<span class='povaneg-saponsuv'></span><span class='lodeanug-masipon'></span>";
  this.slider.innerHTML += this.slides + this.bulks + this.contronls;

  /* Function: Set Slider Auto Sliding */
  this.interval = function() {
  this.autoSlide = setInterval(function() {
  this.next();
  }.bind(this), 5000);
  }.bind(this);

  /* Function: Change Slide */
  this.setSlide = function(id) {
  clearInterval(this.autoSlide);
  /* hide current slide */
  if (_(slider + " .ESlider-active-slide") != null)
  _(slider + " .ESlider-active-slide").classList.remove("ESlider-active-slide");

  /* reset active bulk */
  if (_(slider + " .ESlider-active-bulk") != null)
  _(slider + " .ESlider-active-bulk").classList.remove("ESlider-active-bulk");

  /* show new slide */
  _(slider + " .sepnsivu-donsnelu-" + id).classList.add("ESlider-active-slide");
  _(slider + " .sponsive-bsgonelu[data-slide-id='" + id + "']").classList.add("ESlider-active-bulk");
  _(slider).style.height = _(slider + " .sepnsivu-donsnelu-" + id).clientHeight + "px";

  this.currentSlide = id;

  this.interval();
  }

  /* Функция: следующий слайд */
  this.next = function() {
  if (this.currentSlide == this.images.length)
  this.currentSlide = 1;

  else
  this.currentSlide++;

  this.setSlide(this.currentSlide);
  }

  /* Функция: Предыдущий слайд */
  this.previous = function() {
  if (this.currentSlide == 1)
  this.currentSlide = this.images.length;

  else
  this.currentSlide--;

  this.setSlide(this.currentSlide);
  }

  /* Установить Bulks слушателей событий */
  var bulks = __(slider + " .sponsive-bsgonelu");
  for (var i = 0; i < bulks.length; i++) {
  bulks[i].addEventListener("click", function(e) {
  var slideID = e.target.dataset.slideId;
  this.setSlide(slideID);
  }.bind(this));
  }

  _(slider + " .povaneg-saponsuv").addEventListener("click", function(e) {
  this.previous();
  }.bind(this));

  _(slider + " .lodeanug-masipon").addEventListener("click", function(e) {
  this.next();
  }.bind(this));

  /* Установить первый слайд */
  this.setSlide(1);
}

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

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

Слайдер позволяет легко создавать красивый обзор информации, где закреплено изображение, а также можно подключить анимированный текст, который используется стандартными тегами HTML, что делает его не сложным в настройках и безусловно в обслуживании.
2019-11-07 Загрузок: 1 Просмотров: 266 Комментарий: (0)

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

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

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

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