» »

Слайдер в стиле карусель на jQuery и CSS3

Слайдер в стиле карусель на jQuery и CSS3

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

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

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

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

Слайдер-карусель контента/изображений на CSS + jQuery

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

Создаем простую карусель (слайдер) с помощью jQuery

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

HTML

Код
<div id="cingusamukan" style="max-height: 363px; width: 90%; max-width: 783px; margin: 0 auto">
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь первое изображение №1.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь второе изображение №2.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь третье изображение №5.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь четвертое изображение №4.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь пятое изображение №5.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь шестое изображение №6.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь седьмое изображение №7.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="https://images.wallpaperscraft.ru/image/gory_tuman_noch_134225_1920x1080.jpg">
  </div>
  </div>

CSS

Код
.cingusamukan, .cingusamukan *{
  position: relative;
  box-sizing: border-box;
}

.cingusamukan{
  overflow: hidden;
  width: 100%;
  height: auto;
  font-size: 0;
  white-space: nowrap;
}

.cingusamukan .dokunougesan{
  display: inline-block;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  vertical-align: top;
  opacity: 0.5;
  transition: opacity 0.5s;
}

.cingusamukan .dokunougesan.active{
  opacity: 1;
}

.cingusamukan .cingusamukan_controls{
  font-size: 2rem;
  position: absolute;
  z-index: 2;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cingusamukan .cingusamukan_btn_nav{
  cursor: pointer;
  top: 0;
  bottom: 0;
  font-weight: bold;
  width: calc(1em + 20px);
  color: #fff;
  text-shadow: 0 0 2px #0009;
  transition: all 0.2s;
  opacity: 0;
}

.cingusamukan:hover .cingusamukan_btn_nav{
  opacity: 0.5;
}

.cingusamukan .cingusamukan_btn_nav > *{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cingusamukan .cingusamukan_btn_nav:hover{
  opacity: 1;
}

.cingusamukan .cingusamukan_btn_prev{
  left: 0;
  background: rgba(255,255,255,0);
  background: rgba(18,18,18,0.1);
  background: -moz-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(18,18,18,0.1)), color-stop(100%, rgba(255,255,255,0)));
  background: -webkit-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121212', endColorstr='#ffffff', GradientType=1 );
}

.cingusamukan .cingusamukan_btn_next{
  right: 0;
  background: rgba(255,255,255,0);
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(18,18,18,0.1)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#121212', GradientType=1 );
}

.cingusamukan .cingusamukan_btn_pause{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  color: #fff;
  text-shadow: 0 0 2px #0009;
  transition: all 0.2s;
  opacity: 0;
}

.cingusamukan:hover .cingusamukan_btn_pause{
  opacity: 0.5;
}

.cingusamukan .cingusamukan_btn_pause:hover{
  opacity: 1;
}

.cingusamukan_indicators, .cingusamukan_indicator_select{
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  position: absolute;
}

.cingusamukan_indicator_select{
  display: none;
}

.cingusamukan_indicators .cingusamukan_indicator{
  display: inline-block;
  margin: 0 2px;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 0 2px #0009;
  transition: all 0.2s;
  vertical-align: text-bottom;
}

.cingusamukan_indicators .cingusamukan_indicator.active{
  color: #303030;
  text-shadow: 0 0 2px #606060;
}

.cingusamukan_indicators .cingusamukan_indicator.cingusamukan_indicator_icon{
  height: 12px;
  width: 12px;
  background-color: rgba(185, 185, 185, 0.4);
  border-radius: 50%;
  border: 1px solid #2b2b2b;
}

.cingusamukan_indicators .cingusamukan_indicator.cingusamukan_indicator_icon.active{
  background-color: rgba(53, 53, 53, 0.8);
  border: 1px solid #b8b8b8;
}

.cingusamukan .dokunougesans{
  transition: left 0.5s;
  max-height: 100%;
}

.cingusamukan .hidden{
  visibility: hidden;
}

.dokunougesan img{
  min-height: 100%;
  max-width: 100%;
}

@media screen and (max-width: 500px){
  .cingusamukan .cingusamukan_btn_next, .cingusamukan .cingusamukan_btn_prev, .cingusamukan_indicators{
  display: none;
  }

  .cingusamukan_indicator_select{
  display: block;
  }
}

JS

Код
var cingusamukan = (function(){
  var delay = 5; //seconds
  var cingusamukans = [];

  const DEFAULT_ICONS = {
  pause: "<span>▶</span>",
  play: "<span>⏸</span>",
  next: "<span>></span>",
  prev: "<span><</span>"
  };

  function getProperty(options, opt, def){
  if(typeof options[opt] === "undefined"){
  return def;
  }else{
  return options[opt];
  }
  }

  function cingusamukan(container, options){
  var self = this;

  if(typeof container === "undefined"){
  throw new Error("Parameter 1 must be set");
  }

  if(typeof container === "string"){
  container = document.getElementById(container);

  if(typeof container === "undefined"){
  throw new Error("The container was not found");
  }
  }else if(!(container instanceof Node)){
  throw new Error("Parameter 1 must be either string or DOM-Node");
  }

  if(typeof options === "undefined"){
  options = {};
  }else if(typeof options !== "object"){
  throw new Error("Parameter 2 must be object");
  }

  this.container = container;
  this.dokunougesans = [];
  var timeout = null;
  var current = -1;

  var controls = {};

  this.prev = function(amount){
  if(typeof amount === "undefined"){
  amount = 1;
  }

  if(amount <= 0){
  return;
  }

  var pos = current - amount;

  if(pos < 0){
  pos = this.dokunougesans.length - 1;
  }

  getProperty(options.events, "prev", function(){})();
  self.showdokunougesan(pos);
  };

  this.next = function(amount){
  if(typeof amount === "undefined"){
  amount = 1;
  }

  if(amount <= 0){
  return;
  }

  var pos = current + amount;

  if(pos >= this.dokunougesans.length){
  pos = 0;
  }

  getProperty(options.events, "next", function(){})();
  self.showdokunougesan(pos);
  };

  this.showdokunougesan = function(num){
  if(typeof num === "undefined"){
  num = 0;
  }

  if(this.dokunougesans[num]){
  if(options.playing){
  self.resetTimeout();
  }

  getProperty(options.events, "change_dokunougesan", function(){})(num, this.dokunougesans[num]);

  current = num;

  for(var i = 0; i < this.dokunougesans.length; i++){
  this.dokunougesans[i].classList.remove("active");

  if(controls.indicators_list){
  controls.indicators_list[i].classList.remove("active");
  }
  }

  this.dokunougesans[num].classList.add("active");
  if (controls.indicators_list) {
  controls.indicators_list[num].classList.add("active");
  }

  if(controls.dokunougesans_container){
  controls.dokunougesans_container.style.left = "-" + (100 * parseInt(num)) + "%";
  }

  if(controls.indicator_select){
  controls.indicator_select.selectedIndex = num;
  }
  }
  };

  this.pause = function(){
  if(timeout){
  clearTimeout(timeout);
  timeout = null;
  }

  options.playing = false;

  if(controls.pause){
  controls.pause.innerHTML = getProperty(options, "play_icon", DEFAULT_ICONS.pause);
  }

  getProperty(options.events, "pause", function(){})();
  }

  this.play = function(){
  self.resetTimeout();

  options.playing = true;

  if(controls.pause){
  controls.pause.innerHTML = getProperty(options, "pause_icon", DEFAULT_ICONS.play);
  }

  getProperty(options.events, "play", function(){})();
  }

  this.togglePlay = function(){
  if(timeout){
  self.pause();
  }else{
  self.play();
  }

  getProperty(options.events, "toggle_play", function(){})();
  }

  this.isPlaying = function(){
  return !!timeout;
  };

  this.resetTimeout = function(){
  if(timeout){
  clearTimeout(timeout);
  }

  timeout = setTimeout(function () {
  if(getProperty(options, "play_direction", cingusamukan.FORWARDS) == cingusamukan.BACKWARDS){
  self.prev();
  }else{
  self.next();
  }
  }, delay * 1000);
  };

  this.showUI = function(level){
  if(level instanceof Array){
  controls.prev.classList.add("hidden");
  controls.next.classList.add("hidden");
  controls.pause.classList.add("hidden");
  controls.indicators.classList.add("hidden");

  for(var i = 0; i < level.length; i++){
  switch(level[i]){
  case cingusamukan.UI.PREV:{
  controls.prev.classList.remove("hidden");
  break;
  }
  case cingusamukan.UI.NEXT:{
  controls.next.classList.remove("hidden");
  break;
  }
  case cingusamukan.UI.PAUSE:{
  controls.pause.classList.remove("hidden");
  break;
  }
  case cingusamukan.UI.INDICATORS:{
  controls.indicators.classList.remove("hidden");
  break;
  }
  }
  }
  }else if(typeof level === "number"){
  self.showUI([level]);
  }else if(typeof level === "boolean"){
  if(level){
  self.showUI([cingusamukan.UI.PREV, cingusamukan.UI.NEXT, cingusamukan.UI.PAUSE, cingusamukan.UI.INDICATORS]);
  }else{
  self.showUI([]);
  }
  }else{
  self.showUI(true);
  }
  };

  this.updateView = function(){
  container.innerHTML = "";

  var cnt_dokunougesans = document.createElement("div");
  cnt_dokunougesans.className = "dokunougesans";

  for(var i = 0; i < self.dokunougesans.length; i++){
  cnt_dokunougesans.appendChild(self.dokunougesans[i]);
  }

  controls.dokunougesans_container = cnt_dokunougesans;
  container.appendChild(cnt_dokunougesans);

  var btn_prev = document.createElement("div");
  btn_prev.className = "cingusamukan_btn_nav cingusamukan_btn_prev cingusamukan_controls";
  btn_prev.innerHTML = getProperty(options, "prev_icon", DEFAULT_ICONS.prev);
  btn_prev.addEventListener("click", function () {
  self.prev();
  });

  controls.prev = btn_prev;

  var btn_next = document.createElement("div");
  btn_next.className = "cingusamukan_btn_nav cingusamukan_btn_next cingusamukan_controls";
  btn_next.innerHTML = getProperty(options, "next_icon", DEFAULT_ICONS.next);
  btn_next.addEventListener("click", function () {
  self.next();
  });

  controls.next = btn_next;

  var btn_pause = document.createElement("div");
  btn_pause.className = "cingusamukan_btn_pause cingusamukan_controls";
  btn_pause.addEventListener("click", function () {
  self.togglePlay();
  });

  controls.pause = btn_pause;

  var cnt_indicators = document.createElement("div");
  cnt_indicators.className = "cingusamukan_indicators cingusamukan_controls";

  controls.indicators = cnt_indicators;

  controls.indicators_list = [];

  var select_indicator = document.createElement("select");
  select_indicator.className = "cingusamukan_indicator_select";
  select_indicator.onchange = function(){
  self.showdokunougesan(this.value);
  };

  var indicator_icon = getProperty(options, "indicator_icon", "");
  for (var i = 0; i < self.dokunougesans.length; i++) {
  (function (i_tmp) {
  var indicator = document.createElement("div");
  indicator.className = "cingusamukan_indicator";

  if (indicator_icon != "") {
  indicator.innerHTML = indicator_icon;
  } else {
  indicator.classList.add("cingusamukan_indicator_icon");
  }

  indicator.addEventListener("click", function () {
  self.showdokunougesan(i_tmp);
  });

  controls.indicators_list.push(indicator);

  cnt_indicators.appendChild(indicator);

  var option_indicator = document.createElement("option");
  option_indicator.value = i_tmp;
  option_indicator.innerHTML = (i_tmp + 1);

  if(current == -1 && i_tmp == 0){
  option_indicator.selected = "true";
  }else if(current == i_tmp){
  option_indicator.selected = "true";
  }

  select_indicator.appendChild(option_indicator);
  }(i));
  }

  controls.indicator_select = select_indicator;
   
  container.appendChild(btn_prev);
  container.appendChild(btn_next);
  container.appendChild(btn_pause);
  container.appendChild(cnt_indicators);
  container.appendChild(select_indicator);

  if(current == -1){
  self.showdokunougesan(getProperty(options, "start_dokunougesan", 0));
  }else{
  self.showdokunougesan(current);
  }

  options.playing = getProperty(options, "playing", true);

  if(options.playing){
  self.play();
  }else{
  self.pause();
  }

  // Load images
  var imgs = cnt_dokunougesans.getElementsByTagName('img');

  for(var i = 0; i < imgs.length; i++){
  if(imgs[i].getAttribute("data-src-async")){
  imgs[i].src = imgs[i].getAttribute("data-src-async");
  }
  }
  };

  // Init
  (function(){
  var slds = container.getElementsByClassName('dokunougesan');

  for(var i = 0; i < slds.length; i++){
  self.dokunougesans.push(slds[i]);
  }

  container.classList.add("cingusamukan");

  if(typeof options.events !== "object"){
  options.events = {};
  }

  self.updateView();

  if(!getProperty(options, "show_ui", true)){
  self.showUI(false);
  }

  getProperty(options.events, "load", function(){})(controls.dokunougesans_container);
  }());

  cingusamukans.push(this);
  }

  cingusamukan.setDelay = function(_delay){
  if(typeof _delay === "number"){
  delay = _delay;

  for(var i = 0; i < cingusamukans.length; i++){
  cingusamukans[i].resetTimeout();
  }
  }else{
  console.warn("Parameter 1 must be a number");
  }
  };

  cingusamukan.getDelay = function(){
  return delay;
  }

  cingusamukan.FORWARDS = "play_direction_next";
  cingusamukan.BACKWARDS = "play_direction_prev";

  cingusamukan.UI = {
  PREV: 0,
  NEXT: 1,
  PAUSE: 2,
  INDICATORS: 3,
  };

  return cingusamukan;
}());

/*
IDEA: Integration with pan event
*/
var cingusamukan = new cingusamukan("cingusamukan", {
  play_icon: '<i class="fas fa-play"></i>',
  pause_icon: '<i class="far fa-pause-circle"></i>',
  prev_icon: '<i class="fas fa-angle-left"></i>',
  next_icon: '<i class="fas fa-angle-right"></i>'
  });

Также подключаем шрифтовые кнопки, чтоб на экране отображались.

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

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

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

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

Демонстрация
2019-01-26 Загрузок: 1 Просмотров: 356 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 2019-01-26 00:121
0
На демонстраций пробовал вывести JS через ссылку, так как по себе большой, почему то не выходит, хотя на других получалось сделать.
avatar