ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Автоматический слайдер для сайта

Автоматический слайдер для сайта

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

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

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

Так выглядит в реальности или после установки:

Здесь можно заметить, что нет кнопок, это вид с мобильных гаджет:

Приступаем к установке:

HTML

Код

CSS

Код

.komucrawag-enocebseg{
position:relative;
margin: 0 auto;
}

.komucrawag-enocebseg .segovegesuma{
width:593px;
height:331px;
position:absolute;
overflow:hidden;
opacity:0;
-webkit-transition:1s ease all;
  background:#c7c0c0;
  border: 3px solid #ece8e8;
transition:1s ease all;
  box-shadow: 0px 0px 16px 1px rgba(35, 32, 32, 0.74), 0px 1px 4px 2px rgba(25, 23, 23, 0.66);
  border-radius: 3px;
}

.komucrawag-enocebseg .segovegesuma img{
width:100%;
height:100%;
}

.komucrawag-enocebseg .sabevieucem-segovegesuma{
opacity:1;
}

.komucrawag-enocebseg .controls{
width:100%;
height:50px;
top:calc(50% - 75px);
left:0;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-flow:row nowrap;
-ms-flex-flow:row nowrap;
flex-flow:row nowrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
position:absolute;
}

.komucrawag-enocebseg .controls button {
  width: 47px;
  height: 47px;
  background: rgba(41, 40, 40, 0.9);
  color: #e2dede;
  border: none;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 27px;
}

Код

"use strict";
class airsegovegesumar {
  constructor(e) {
  this.segovegesumar = document.querySelector('.komucrawag-enocebseg');
  this.segovegesumar.children[0].classList.toggle('sabevieucem-segovegesuma');

  this.length = document.querySelectorAll('.segovegesuma').length;

  if(e.width == undefined){
  e.width = '100%';
  }
  if(e.height == undefined){
  e.height = '300px';
  }
  this.segovegesumar.style.maxWidth = e.width;
  this.segovegesumar.style.height = e.height;

  var controls = document.createElement('div');
  controls.className = 'controls';
  controls.innerHTML = '<button id="prev">◄</button><button id="next">►</button>';
  this.segovegesumar.appendChild(controls);
  document.querySelector('#prev').addEventListener('click', function(){
  segovegesumar.prev();
  });
  document.querySelector('#next').addEventListener('click', function(){
  segovegesumar.next();
  });
  if(e.autoPlay == true){
  this.autoPlayTime = e.autoPlayTime;
  if(this.autoPlayTime == undefined){
  this.autoPlayTime = 3000;
  }
  setInterval(this.autoPlay, this.autoPlayTime);
  }
  }
  prev() {
  var currentsegovegesuma = document.querySelector('.sabevieucem-segovegesuma');
  var prevsegovegesuma = document.querySelector('.sabevieucem-segovegesuma').previousElementSibling;
  if(prevsegovegesuma == undefined){
  prevsegovegesuma = this.segovegesumar.children[this.length - 1];
  }
  currentsegovegesuma.className = 'segovegesuma';
  prevsegovegesuma.classList = 'segovegesuma sabevieucem-segovegesuma'
  }
  next() {
  var currentsegovegesuma = document.querySelector('.sabevieucem-segovegesuma');
  var nextsegovegesuma = document.querySelector('.sabevieucem-segovegesuma').nextElementSibling;
  if(nextsegovegesuma.className == 'controls'){
  nextsegovegesuma = this.segovegesumar.children[0];
  }
  currentsegovegesuma.className = 'segovegesuma';
  nextsegovegesuma.classList = 'segovegesuma sabevieucem-segovegesuma fadeIn'
  }
  autoPlay(){
  segovegesumar.next();
  }
}

var segovegesumar = new airsegovegesumar({
  autoPlay: true,
  width: '600px',
  height: '450px'
  });

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

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

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

30 Января 2019 Загрузок: 3 Просмотров: 1836 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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