ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер с помощью JS и CSS для сайта

Слайдер с помощью JS и CSS для сайта

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

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

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

Проверено на тестовой площадке, где идут реальные снимки:

Слайдер на CSS для сайта

Здесь можно заметить нижний функций переключателей:

Слайдер в адаптивном виде

Приступаем:

HTML

Код
<div class="gorporation" id="main-gorporation">
  <div class="gorporation-wrapper">
  <div class="donanything" id="donanything-1" data-image="Ссылка на изображение #1"></div>
  <div class="donanything" id="donanything-2" data-image="Ссылка на изображение #2"></div>
  <div class="donanything" id="donanything-3" data-image="Ссылка на изображение #3"></div>
  </div>
  <div class="gorporation-nav">
  <button class="gorporation-previous">Предыдущий</button>
  <button class="gorporation-next">Следующий</button>
  </div>
  <div class="gorporation-pagination">
  <a href="#donanything-1">1</a>
  <a href="#donanything-2">2</a>
  <a href="#donanything-3">3</a>
  </div>
</div>

CSS


JS

Код
(function() {
   
  function donanythingshow( element ) {
  this.el = document.querySelector( element );
  this.init();
  }
   
  donanythingshow.prototype = {
  init: function() {
  this.wrapper = this.el.querySelector( ".gorporation-wrapper" );
  this.donanythings = this.el.querySelectorAll( ".donanything" );
  this.previous = this.el.querySelector( ".gorporation-previous" );
  this.next = this.el.querySelector( ".gorporation-next" );
  this.navigationLinks = this.el.querySelectorAll( ".gorporation-pagination a" );
  this.index = 0;
  this.total = this.donanythings.length;
   
  this.setup();
  this.actions();  
  },
  _donanythingTo: function( donanything ) {
  var currentdonanything = this.donanythings[donanything];
  currentdonanything.style.opacity = 1;
   
  for( var i = 0; i < this.donanythings.length; i++ ) {
  var donanything = this.donanythings[i];
  if( donanything !== currentdonanything ) {
  donanything.style.opacity = 0;
  }
  }
  },
  _highlightCurrentLink: function( link ) {
  var self = this;
  for( var i = 0; i < self.navigationLinks.length; ++i ) {
  var a = self.navigationLinks[i];
  a.className = "";  
  }
  link.className = "current";  
  },
  setup: function() {
  var self = this;
   
  for( var l = 0; l < self.donanythings.length; ++l ) {
  var eldonanything = self.donanythings[l];
  var image = eldonanything.getAttribute( "data-image" );
  eldonanything.style.backgroundImage = "url(" + image + ")";
  }
   
  for( var k = 0; k < self.navigationLinks.length; ++k ) {
  var pagLink = self.navigationLinks[k];
  pagLink.setAttribute( "data-index", k );
  }  
  },
  actions: function() {
   
  var self = this;
   
  self.next.addEventListener( "click", function() {
  self.index++;
  self.previous.style.display = "block";
   
  if( self.index == self.total - 1 ) {
  self.index = self.total - 1;
  self.next.style.display = "none";
  }
   
  self._donanythingTo( self.index );
   
  self._highlightCurrentLink( self.navigationLinks[self.index] );
   
   

   
  }, false);
   
  self.previous.addEventListener( "click", function() {
  self.index--;
  self.next.style.display = "block";
   
  if( self.index == 0 ) {
  self.index = 0;
  self.previous.style.display = "none";
  }
   
  self._donanythingTo( self.index );
   
  self._highlightCurrentLink( self.navigationLinks[self.index] );  
   
   
   
  }, false);
   
  for( var i = 0; i < self.navigationLinks.length; ++i ) {
  var a = self.navigationLinks[i];
   
  a.addEventListener( "click", function( e ) {
  e.preventDefault();
  var n = parseInt( this.getAttribute( "data-index" ), 10 );
   
  self.index = n;  
   
  if( self.index == 0 ) {
  self.index = 0;
  self.previous.style.display = "none";
  }
   
  if( self.index > 0 ) {
  self.previous.style.display = "block";  
  }
   
  if( self.index == self.total - 1 ) {
  self.index = self.total - 1;
  self.next.style.display = "none";
  } else {
  self.next.style.display = "block";  
  }
   
  self._donanythingTo( self.index );
   
  self._highlightCurrentLink( this );
   
   
   
  }, false);
  }
  }
   
   
  };
   
  document.addEventListener( "DOMContentLoaded", function() {
   
  var gorporation = new donanythingshow( "#main-gorporation" );
   
  });
   
   
})();

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

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

Демонстрация
12 Июня 2019 Загрузок: 2 Просмотров: 1064 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

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