CSSを使ってフェイドするスライド実装

/*
 * -- Slider --
 * slider plugins class
*/
.slide { 
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 2s ease-in-out;
       -moz-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
         -o-transition: all 2s ease-in-out;
            transition: all 2s ease-in-out;
}

.slide.active {
    visibility: visible;
    opacity: 1;
    z-index: 10;
    -webkit-transition: all 2s ease-in-out 1s;
       -moz-transition: all 2s ease-in-out 1s;
        -ms-transition: all 2s ease-in-out 1s;
         -o-transition: all 2s ease-in-out 1s;
            transition: all 2s ease-in-out 1s;
}

  $.fn.roopSlider = function(options) {
    $this = $(this)

    var settings = $.extend( {
                     'speed': 5000,
                     'start': 0
                   }, options);

    var Slider = function(obj){
      $slide = $(obj).find('.slide')
      $slide[settings.start].classList.add('active')

      setTimeout(function(){
        roop();
      },settings.speed);
    };

    var getActive = function(){
      return $this.find('.active')
    }

    var getNext = function(){
      $active = getActive()
      if ($active.next('.slide').length == 0) {
        return $this.find('.slide').first()
      }

      return $active.next('.slide')
    }

    var roop = function(){
        active = getActive();
        next = getNext();

        active.removeClass('active');
        next.addClass('active');

        setTimeout(function(){
          roop();
        },settings.speed);
    };

あとはjavasriptでactiveクラスを切り替えるだけ