Umbrella.js slider

Simple slider with fadeIn / Fade out with Umbrella.JS by Val Kotlarov Hoffman

by valk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/umbrella/3.1.0/umbrella.min.js"></script>
<div class="slider" >
    <div class="slider__slide slider__slide--current" >First Slide </div>
    <div  class="slider__slide">
    whaterver 
    <div  style"display: none">
    t1 %t2% 
    </div>
    </div>
    <div  class="slider__slide"><img src="https://seekingalpha.atlassian.net/secure/useravatar?ownerId=valery&avatarId=12700&noRedirect=true"/></div>
    <div class="slider__slide"><img src="https://seekingalpha.atlassian.net/secure/useravatar?ownerId=jonathan&avatarId=11800&noRedirect=true"/></div>
    <div  class="slider__slide">5th</div>
    <div  class="slider__slide">Last</div>
    
    <div class="slider__controls">
       <span class='slider__prev'>prev</span>
      <span class='slider__next'>next</span>
    </div>
</div>

CSS

.slider {
  padding: 4px;
}

.slider__slide {
  position: absolute;
  opacity: 0;
  transition: visibility 0s, opacity 0.66s linear;
  display: block;
  width: 100px;
  height: 50px;
  border: 1px solid #963
}

.slider__slide--current {
  visibility: visible;
  opacity: 1;
  transition: 0.33s;
}

.slider__slide--hidden {
  transition: 0.33s;
  opacity: 0;
}

.slider__controls {
  position: absolute;
  top: 70px;
}

JavaScript

var slides = [];
var currentSlide = 0;

u.prototype.fadeOut = function(){
  var that = this;
  that.removeClass('slider__slide--current');
  that.addClass('slider__slide--hidden');
};

u.prototype.fadeIn = function(delay){
  var that = this;
  setTimeout(function() {
    that.removeClass('slider__slide--hidden');
    that.addClass('slider__slide--current');
  }, delay);
};

function last() {
  return slides.length - 1;
}

function increaseCurrentSlide() {
  if (currentSlide === last()) {
    currentSlide = 0;
  } else {
    currentSlide++;
  }
  return currentSlide;
}

function decreaseCurrentSlide() {
  if (currentSlide === 0) {
    currentSlide = last();
  } else {
    currentSlide--;
  }
  return currentSlide;
}

function showNextSlide() {
  uEl = u(slides.nodes[currentSlide]);
  uEl.fadeOut(0);
  var nextNum = increaseCurrentSlide();
  uElNext = u(slides.nodes[nextNum]);
  uElNext.fadeIn(180);
}

function showPrevSlide() {
  uEl = u(slides.nodes[currentSlide]);
  uEl.fadeOut(0);
  var prevNum = decreaseCurrentSlide();
  uElPrev = u(slides.nodes[prevNum]);
  uElPrev.fadeIn(180);
}

function initSlides() {
  slides = u('.slider__slide');
  slides.map(function(slide) { 
    if (!u(slide).hasClass('slider__slide--current')) {
      u(slide).addClass('slider__slide--hidden');
    }
  });
  u('.slider__prev').on('click', function() {
    showPrevSlide();
  })
  
  u('.slider__next').on('click', function() {
    showNextSlide();
  })
}

initSlides()