« Адаптивный слайдер в стиле минимализм на HTML, CSS и JS »

Описание материала:

В сегодняшнем материале мы Вам предоставим не плохой и адаптивный слайдер в стиле минимализм. Данный слайдер сделан на HyperText Markup Language (HTML), Cascading Style Sheets (CSS) и JavaScript (JS). Как видно на скриншоте, на слайдере есть не большое изображение размером 150x150px, Название, Адрес сайта и Краткое описание, все это можно изменить под себя, как вам угодно. Так же в CSS, вы можете подстроить слайдер по себя, изменить цвет каждого слайда, размер текста, цвет текста. Посмотреть на работоспособность и на сам слайдер можно на Демонстративной странице, ссылка будет внизу материала.

Установка:
HTML код:

Код
<div id="slider" class="slider">
  <ol class="slider__indicators">
  <li class="slider__indicator slider__indicator_active" data-slide-to="0"></li>
  <li class="slider__indicator" data-slide-to="1"></li>
  <li class="slider__indicator" data-slide-to="2"></li>
  <li class="slider__indicator" data-slide-to="3"></li>
  </ol>
  <div class="slider__items">
  <div class="slider__item slider__item_1 slider__item_active">
  <div class="slider__item_inner">
  <span class="slider__item_img">
  <img class="slider__item_photo" src="http://ufive.ru/demo_file/adap_slider/ufive.jpg" alt="">
  </span>
  <span class="slider__item_testimonial">
  <span class="slider__item_name">Лучшее для uCoz и не только!</span>
  <span class="slider__item_post">ufive.ru</span>
  <span class="slider__item_text">
  У нас на сайте Вы можете найти и скачать бесплатно материалы для uCoz и не только...
  </span>
  </span>
  </div>
  </div>
  <div class="slider__item slider__item_2">
  <div class="slider__item_inner">
  <span class="slider__item_img">
  <img src="http://ufive.ru/demo_file/adap_slider/zornet.jpg" alt="">
  </span>
  <span class="slider__item_testimonial">
  <span class="slider__item_name">Сайт для вебмастера</span>
  <span class="slider__item_post">zornet.ru</span>
  <span class="slider__item_text">
  Интересные решения для вебмастера в создание и продвижение сайтов, используя HTML и CSS с оригинальным способом графического дизайна.
  </span>
  </span>
  </div>
  </div>
  <div class="slider__item slider__item_3">
  <div class="slider__item_inner">
  <span class="slider__item_img">
  <img src="http://ufive.ru/demo_file/adap_slider/ucoz.jpg" alt="">
  </span>
  <span class="slider__item_testimonial">
  <span class="slider__item_name">Бесплатный конструктор сайтов</span>
  <span class="slider__item_post">ucoz.ru</span>
  <span class="slider__item_text">
  Как создать свой сайт? Самостоятельно! В конструкторе сайтов uCoz это легко и практически бесплатно.
  </span>
  </span>
  </div>
  </div>
  <div class="slider__item slider__item_4">
  <div class="slider__item_inner">
  <span class="slider__item_img">
  <img src="http://ufive.ru/demo_file/adap_slider/uguide.jpg" alt="">
  </span>
  <span class="slider__item_testimonial">
  <span class="slider__item_name">Самостоятельное создание сайтов</span>
  <span class="slider__item_post">uguide.ru</span>
  <span class="slider__item_text">
  Понятно и доходчиво о самостоятельном создании сайтов при помощи конструкторов или устанавливаемых CMS.
  </span>
  </span>
  </div>
  </div>
  </div>
  <a class="slider__control slider__control_prev" href="#" role="button"></a>
  <a class="slider__control slider__control_next" href="#" role="button"></a>
  </div>


CSS код:
Код
<style>
/* Адаптивный слайдер в стиле минимализм на HTML,CSS и JS */
  body {
  margin: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

  ol,
  ul,
  dl {
  margin-top: 0;
  margin-bottom: 1rem;
  }

  .slider {
  /* устанавливаем относительное позиционирование элементу */
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 960px;
  }

  .slider__items {
  /* устанавливаем относительное позиционирование элементу */
  position: relative;
  /* устанавливаем элементу ширину, равную 100% */
  width: 100%;
  overflow: hidden;
  }

  .slider__item {
  /* устанавливаем относительное позиционирование элементу */
  position: relative;
  /* отключаем по умолчанию отображение всех слайдов */
  display: none;
  /* устанавливаем элементу ширину, равную 100% */
  width: 100%;
  /* длительность анимации трансформации */
  transition: transform 0.6s ease;
  /* не показывать обратную сторону трансформируемого элемента */
  backface-visibility: hidden;
  }

  .slider__item_active,
  .slider__item_next,
  .slider__item_prev {
  /* отображаем слайд, если он имеет один из этих классов */
  display: block;
  }

  .slider__item_next,
  .slider__item_prev {
  /* устанавливаем абсолютное позиционирование для элемента, на который будет сменяться слайд (на время трансформации) */
  position: absolute;
  /* устанавливаем положение элемента, т.е. координату top */
  top: 0;
  }

  .slider__item_next.slider__item_left,
  .slider__item_prev.slider__item_right {
  /* сдвигаем элемент на 0 по горизонтали */
  transform: translateX(0);
  }

  .slider__item_next,
  .slider__item_right.slider__item_active {
  /* сдвигаем элемент на 100% по горизонтали */
  transform: translateX(100%);
  }

  .slider__item_prev,
  .slider__item_left.slider__item_active {
  /* сдвигаем элемент на -100% по горизонтали */
  transform: translateX(-100%);
  }

  /* элементы управления (назад и вперёд) слайдером */

  .slider__control {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  }

  .slider__control:hover,
  .slider__control:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: .9;
  }

  .slider__control_prev {
  left: 0;
  }

  .slider__control_next {
  right: 0;
  }

  .slider__control::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  }

  .slider__control_prev::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }

  .slider__control_next::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  }

  /* индикаторы слайдера */

  .slider__indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
  }

  .slider__indicator {
  position: relative;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  }

  .slider__indicator::before {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
  }

  .slider__indicator::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
  }

  .slider__indicator_active {
  background-color: #fff;
  }

  img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  }

  .slider__item {}

  .slider__item_1 {
  background: linear-gradient(45deg, #ecab5f 10%, #ecab5f 90%);
  }

  .slider__item_2 {
  background: linear-gradient(to right, #18547D, #18547D);
  }

  .slider__item_3 {
  background: linear-gradient(to right, #428bca, #428bca);
  }

  .slider__item_4 {
  background: linear-gradient(to right, #333333, #333333);
  }

  /* .slider__item_inner {
  position: absolute;
  right: 15%;
  bottom: 30px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }*/

  .slider__item {
  height: 320px;
  overflow: hidden;
  }

  .slider__item_inner {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 36px;
  bottom: 36px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  }

  .slider__item_img {
  flex: 0 0 80px;
  max-width: 80px;
  }

  .slider__item_testimonial {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  text-align: center;

  }

  @media (min-width: 576px) {
  .slider__item {
  height: 250px;
  }
  .slider__item_inner {
  flex-direction: row;
  }
  .slider__item_testimonial {
  margin-left: 15px;
  }
  .slider__item_img {
  flex: 0 0 150px;
  max-width: 150px;
  }
  .slider__item_testimonial {
  text-align: left;
  }
  }

  .slider__item_name {
  font-size: 20px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  }

  .slider__item_post {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  }

  .slider__item_text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  }
/* uFive.Ru */
</style>


JS код:
Код
<script>
  'use strict';
  var slider = (function (config) {

  const ClassName = {
  INDICATOR_ACTIVE: 'slider__indicator_active',
  ITEM: 'slider__item',
  ITEM_LEFT: 'slider__item_left',
  ITEM_RIGHT: 'slider__item_right',
  ITEM_PREV: 'slider__item_prev',
  ITEM_NEXT: 'slider__item_next',
  ITEM_ACTIVE: 'slider__item_active'
  }

  var
  _isSliding = false, // индикация процесса смены слайда
  _interval = 0, // числовой идентификатор таймера
  _transitionDuration = 700, // длительность перехода
  _slider = {}, // DOM элемент слайдера
  _items = {}, // .slider-item (массив слайдов)  
  _sliderIndicators = {}, // [data-slide-to] (индикаторы)
  _config = {
  selector: '', // селектор слайдера
  isCycling: true, // автоматическая смена слайдов
  direction: 'next', // направление смены слайдов
  interval: 5000, // интервал между автоматической сменой слайдов
  pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
  };

  var
  // функция для получения порядкового индекса элемента
  _getItemIndex = function (_currentItem) {
  var result;
  _items.forEach(function (item, index) {
  if (item === _currentItem) {
  result = index;
  }
  });
  return result;
  },
  // функция для подсветки активного индикатора
  _setActiveIndicator = function (_activeIndex, _targetIndex) {
  if (_sliderIndicators.length !== _items.length) {
  return;
  }
  _sliderIndicators[_activeIndex].classList.remove(ClassName.INDICATOR_ACTIVE);
  _sliderIndicators[_targetIndex].classList.add(ClassName.INDICATOR_ACTIVE);
  },

  // функция для смены слайда
  _slide = function (direction, activeItemIndex, targetItemIndex) {
  var
  directionalClassName = ClassName.ITEM_RIGHT,
  orderClassName = ClassName.ITEM_PREV,
  activeItem = _items[activeItemIndex], // текущий элемент
  targetItem = _items[targetItemIndex]; // следующий элемент

  var _slideEndTransition = function () {
  activeItem.classList.remove(ClassName.ITEM_ACTIVE);
  activeItem.classList.remove(directionalClassName);
  targetItem.classList.remove(orderClassName);
  targetItem.classList.remove(directionalClassName);
  targetItem.classList.add(ClassName.ITEM_ACTIVE);
  window.setTimeout(function () {
  if (_config.isCycling) {
  clearInterval(_interval);
  _cycle();
  }
  _isSliding = false;
  activeItem.removeEventListener('transitionend', _slideEndTransition);
  }, _transitionDuration);
  };

  if (_isSliding) {
  return; // завершаем выполнение функции если идёт процесс смены слайда
  }
  _isSliding = true; // устанавливаем переменной значение true (идёт процесс смены слайда)

  if (direction === "next") { // устанавливаем значение классов в зависимости от направления
  directionalClassName = ClassName.ITEM_LEFT;
  orderClassName = ClassName.ITEM_NEXT;
  }

  targetItem.classList.add(orderClassName); // устанавливаем положение элемента перед трансформацией
  _setActiveIndicator(activeItemIndex, targetItemIndex); // устанавливаем активный индикатор

  window.setTimeout(function () { // запускаем трансформацию
  targetItem.classList.add(directionalClassName);
  activeItem.classList.add(directionalClassName);
  activeItem.addEventListener('transitionend', _slideEndTransition);
  }, 0);

  },
  // функция для перехода к предыдущему или следующему слайду
  _slideTo = function (direction) {
  var
  activeItem = _slider.querySelector('.' + ClassName.ITEM_ACTIVE), // текущий элемент
  activeItemIndex = _getItemIndex(activeItem), // индекс текущего элемента  
  lastItemIndex = _items.length - 1, // индекс последнего элемента
  targetItemIndex = activeItemIndex === 0 ? lastItemIndex : activeItemIndex - 1;
  if (direction === "next") { // определяем индекс следующего слайда в зависимости от направления
  targetItemIndex = activeItemIndex == lastItemIndex ? 0 : activeItemIndex + 1;
  }
  _slide(direction, activeItemIndex, targetItemIndex);
  },
  // функция для запуска автоматической смены слайдов в указанном направлении
  _cycle = function () {
  if (_config.isCycling) {
  _interval = window.setInterval(function () {
  _slideTo(_config.direction);
  }, _config.interval);
  }
  },
  // обработка события click
  _actionClick = function (e) {
  var
  activeItem = _slider.querySelector('.' + ClassName.ITEM_ACTIVE), // текущий элемент
  activeItemIndex = _getItemIndex(activeItem), // индекс текущего элемента
  targetItemIndex = e.target.getAttribute('data-slide-to');

  if (!(e.target.hasAttribute('data-slide-to') || e.target.classList.contains('slider__control'))) {
  return; // завершаем если клик пришёлся на не соответствующие элементы
  }
  if (e.target.hasAttribute('data-slide-to')) {// осуществляем переход на указанный сдайд  
  if (activeItemIndex === targetItemIndex) {
  return;
  }
  _slide((targetItemIndex > activeItemIndex) ? 'next' : 'prev', activeItemIndex, targetItemIndex);
  } else {
  e.preventDefault();
  _slideTo(e.target.classList.contains('slider__control_next') ? 'next' : 'prev');
  }
  },
  // установка обработчиков событий
  _setupListeners = function () {
  // добавление к слайдеру обработчика события click
  _slider.addEventListener('click', _actionClick);
  // остановка автоматической смены слайдов (при нахождении курсора над слайдером)
  if (_config.pause && _config.isCycling) {
  _slider.addEventListener('mouseenter', function (e) {
  clearInterval(_interval);
  });
  _slider.addEventListener('mouseleave', function (e) {
  clearInterval(_interval);
  _cycle();
  });
  }
  };

  // init (инициализация слайдера)
  for (var key in config) {
  if (key in _config) {
  _config[key] = config[key];
  }
  }
  _slider = (typeof _config.selector === 'string' ? document.querySelector(_config.selector) : _config.selector);
  _items = _slider.querySelectorAll('.' + ClassName.ITEM);
  _sliderIndicators = _slider.querySelectorAll('[data-slide-to]');
  // запуск функции cycle
  _cycle();
  _setupListeners();

  return {
  next: function () { // метод next  
  _slideTo('next');
  },
  prev: function () { // метод prev  
  _slideTo('prev');
  },
  stop: function () { // метод stop
  clearInterval(_interval);
  },
  cycle: function () { // метод cycle  
  clearInterval(_interval);
  _cycle();
  }
  }
  }({
  selector: '.slider',
  isCycling: false,
  direction: 'next',
  interval: 5000,
  pause: true
  }));
  </script>


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 80


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar