slider jquery

by Andrey

HTML

<div class="header">
  <div class="header__bg" style='background: red'>1</div>
  <div class="header__bg" style='background: blue'>2</div>
  <div class="header__bg" style='background: green'>3</div>
  <div class="header__bg" style='background: orange'>4</div>
</div>

CSS

.header {
  height: 400px;
  position: relative;
}

.header__bg {
  position: absolute;
  left: 0;
  width: 100%;
  right: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.is-current {
  z-index: 1;
  opacity: 1;
}

JavaScript

$('.header__bg:first').addClass('is-current');
setInterval(function() {
  var $next = $('.header__bg.is-current')
    .removeClass('is-current')
    .next('.header__bg');

  $next.length ? $next.addClass('is-current') : $('.header__bg:first').addClass('is-current');
}, 1000);