ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Слайдер-карусель в адаптивном стиле CSS

Слайдер-карусель в адаптивном стиле CSS

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

Если его устанавливать в приготовленный каркас блока, то остается только разместить основу HTML, что в дальнейшем установится автоматически по месту или по значению ширины, что была задана блоку. Здесь идут переключатели, это по правую и левую сторону, и дублируются в самом низу по центру.

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

Рассмотрим адаптивный слайдер карусель на разных гаджет

1. Это если ставить на полноценную страницу, где сами задаем ширину:

Легкие и красивые адаптивные слайдеры для сайта

2. Это уже на более маленьком экране, как пример можно взять за смартфон:

3. Остается небольшие экраны, что также все корректно показывает:

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

Установка:

HTML

Код

CSS

Код

/* стили основного контейнера слайдера */
  .pedenus-slaidera {
  position: relative;
  overflow: hidden;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  }

  /* стили для обёртки, в которой заключены слайды */
  .sended-nesunam {
  position: relative;
  overflow: hidden;
  }

  /* стили для контейнера слайдов */
  .design-mansecus {
  display: flex;
  transition: transform 0.6s ease;
  }

  /* стили для слайдов */
  .design-mansecu {
  flex: 0 0 100%;
  max-width: 100%;
  }

  /* стили для кнопок "вперед" и "назад" */
  .educas-nsution {
  position: absolute;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  height: 50px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  }

  .educas-nsution_show {
  display: flex;
  }

  .educas-nsution:hover,
  .educas-nsution:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
  }

  .educas-nsution_prev {
  left: 0;
  }

  .educas-nsution_next {
  right: 0;
  }

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

  .educas-nsution_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");
  }

  .educas-nsution_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");
  }

  /* стили для индикаторов */
  .coevened-ucadional {
  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;
  margin-top: 0;
  margin-bottom: 0;
  }

  .coevened-ucadional li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 4px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  }

  .coevened-ucadional li.kunovenas {
  background-color: #fff;
  }

  .img-naminks {
  display: inline-block;
  height: auto;
  max-width: 100%;
  }

Код

'use strict';
  var slideShow = (function () {
  return function (selector, config) {
  var
  _slider = document.querySelector(selector),
  _sliderContainer = _slider.querySelector('.design-mansecus'),
  _sliderItems = _slider.querySelectorAll('.design-mansecu'),
  _sliderControls = _slider.querySelectorAll('.educas-nsution'),
  _currentPosition = 0,
  _transformValue = 0,
  _transformStep = 100,
  _itemsArray = [],
  _timerId,
  _indicatorItems,
  _indicatorIndex = 0,
  _indicatorIndexMax = _sliderItems.length - 1,
  _stepTouch = 50,
  _config = {
  isAutoplay: false,
  directionAutoplay: 'next',
  delayAutoplay: 5000,
  isPauseOnHover: true
  };

  for (var key in config) {
  if (key in _config) {
  _config[key] = config[key];
  }
  }

  for (var i = 0, length = _sliderItems.length; i < length; i++) {
  _itemsArray.push({ item: _sliderItems[i], position: i, transform: 0 });
  }

  var position = {
  getItemIndex: function (mode) {
  var index = 0;
  for (var i = 0, length = _itemsArray.length; i < length; i++) {
  if ((_itemsArray[i].position < _itemsArray[index].position && mode === 'min') || (_itemsArray[i].position > _itemsArray[index].position && mode === 'max')) {
  index = i;
  }
  }
  return index;
  },
  getItemPosition: function (mode) {
  return _itemsArray[position.getItemIndex(mode)].position;
  }
  };

  var _move = function (direction) {
  var nextItem, currentIndicator = _indicatorIndex;;
  if (direction === 'next') {
  _currentPosition++;
  if (_currentPosition > position.getItemPosition('max')) {
  nextItem = position.getItemIndex('min');
  _itemsArray[nextItem].position = position.getItemPosition('max') + 1;
  _itemsArray[nextItem].transform += _itemsArray.length * 100;
  _itemsArray[nextItem].item.style.transform = 'translateX(' + _itemsArray[nextItem].transform + '%)';
  }
  _transformValue -= _transformStep;
  _indicatorIndex = _indicatorIndex + 1;
  if (_indicatorIndex > _indicatorIndexMax) {
  _indicatorIndex = 0;
  }
  } else {
  _currentPosition--;
  if (_currentPosition < position.getItemPosition('min')) {
  nextItem = position.getItemIndex('max');
  _itemsArray[nextItem].position = position.getItemPosition('min') - 1;
  _itemsArray[nextItem].transform -= _itemsArray.length * 100;
  _itemsArray[nextItem].item.style.transform = 'translateX(' + _itemsArray[nextItem].transform + '%)';
  }
  _transformValue += _transformStep;
  _indicatorIndex = _indicatorIndex - 1;
  if (_indicatorIndex < 0) {
  _indicatorIndex = _indicatorIndexMax;
  }
  }
  _sliderContainer.style.transform = 'translateX(' + _transformValue + '%)';
  _indicatorItems[currentIndicator].classList.remove('kunovenas');
  _indicatorItems[_indicatorIndex].classList.add('kunovenas');
  };

  var _moveTo = function (index) {
  var i = 0, direction = (index > _indicatorIndex) ? 'next' : 'prev';
  while (index !== _indicatorIndex && i <= _indicatorIndexMax) {
  _move(direction);
  i++;
  }
  };

  var _startAutoplay = function () {
  if (!_config.isAutoplay) {
  return;
  }
  _stopAutoplay();
  _timerId = setInterval(function () {
  _move(_config.directionAutoplay);
  }, _config.delayAutoplay);
  };

  var _stopAutoplay = function () {
  clearInterval(_timerId);
  };

  var _addIndicators = function () {
  var indicatorsContainer = document.createElement('ol');
  indicatorsContainer.classList.add('coevened-ucadional');
  for (var i = 0, length = _sliderItems.length; i < length; i++) {
  var sliderIndicatorsItem = document.createElement('li');
  if (i === 0) {
  sliderIndicatorsItem.classList.add('kunovenas');
  }
  sliderIndicatorsItem.setAttribute("data-slide-to", i);
  indicatorsContainer.appendChild(sliderIndicatorsItem);
  }
  _slider.appendChild(indicatorsContainer);
  _indicatorItems = _slider.querySelectorAll('.coevened-ucadional > li')
  };

  var _isTouchDevice = function () {
  return !!('ontouchstart' in window || navigator.maxTouchPoints);
  };

  var _setUpListeners = function () {
  var _startX = 0;
  if (_isTouchDevice()) {
  _slider.addEventListener('touchstart', function (e) {
  _startX = e.changedTouches[0].clientX;
  _startAutoplay();
  });
  _slider.addEventListener('touchend', function (e) {
  var
  _endX = e.changedTouches[0].clientX,
  _deltaX = _endX - _startX;
  if (_deltaX > _stepTouch) {
  _move('prev');
  } else if (_deltaX < -_stepTouch) {
  _move('next');
  }
  _startAutoplay();
  });
  } else {
  for (var i = 0, length = _sliderControls.length; i < length; i++) {
  _sliderControls[i].classList.add('educas-nsution_show');
  }
  }
  _slider.addEventListener('click', function (e) {
  if (e.target.classList.contains('educas-nsution')) {
  e.preventDefault();
  _move(e.target.classList.contains('educas-nsution_next') ? 'next' : 'prev');
  _startAutoplay();
  } else if (e.target.getAttribute('data-slide-to')) {
  e.preventDefault();
  _moveTo(parseInt(e.target.getAttribute('data-slide-to')));
  _startAutoplay();
  }
  });
  document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === "hidden") {
  _stopAutoplay();
  } else {
  _startAutoplay();
  }
  }, false);
  if (_config.isPauseOnHover && _config.isAutoplay) {
  _slider.addEventListener('mouseenter', function () {
  _stopAutoplay();
  });
  _slider.addEventListener('mouseleave', function () {
  _startAutoplay();
  });
  }
  };

  _addIndicators();
  _setUpListeners();
  _startAutoplay();

  return {
  next: function () {
  _move('next');
  },

  left: function () {
  _move('prev');
  },

  stop: function () {
  _config.isAutoplay = false;
  _stopAutoplay();
  },

  cycle: function () {
  _config.isAutoplay = true;
  _startAutoplay();
  }
  }
  }
  }());

  slideShow('.pedenus-slaidera', {
  isAutoplay: true
  });

Немного JavaScript, а также HTML5 и CSS3, что в процессе получается простой и адаптивный слайдер. Что можно разместить под любую тематику сайта, где задействуют слайд по прямому назначению, это делиться своими интерфейсными разработками для изучения, оптимизации и общего использования.

Где веб-разработчик самостоятельно настраивает различные элементы страницы и связать их на первой странице. Затем пользователь может легко просматривать элементы посредством усиления эффекта скользящей веб-страницы.

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

07 Марта 2020 Загрузок: 5 Просмотров: 1955 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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