title: Slider slides are not aligned?
body: <p>I have a slider for images that I converted into text to fade quotes in and out, for some reason everytime it loads the new slide, it flashes it at the bottom of the container and then movies it up. Does anyone have any idea what this could be?</p>
  
  <p><a href="http://jsfiddle.net/eu1rqh1z/" rel="nofollow">JsFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id="slider" class="container"&gt;
  &lt;ul class="slider-wrapper"&gt;
  &lt;li class="current-slide"&gt;
  &lt;div class="quote"&gt;This is a product quote and testimonial.. blah blah blah, DonorPro is very good, &lt;span&gt;blah blah blah, DonorPro is very good&lt;/span&gt;.
  &lt;div class="author"&gt;Random Company/Orgainization&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;div class="quote"&gt;This is a product quote and testimonial.. blah blah blah, DonorPro is very good, &lt;span&gt;blah blah blah, DonorPro is very good&lt;/span&gt;.
  &lt;div class="author"&gt;Random Company/Orgainization 2&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;div class="quote"&gt;This is a product quote and testimonial.. blah blah blah, DonorPro is very good, &lt;span&gt;blah blah blah, DonorPro is very good&lt;/span&gt;.
  &lt;div class="author"&gt;Random Company/Orgainization 3&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
  
       var SliderModule = (function() {
          var pb = {};
          pb.el = $('#slider');
          pb.items = {
              panels: pb.el.find('.slider-wrapper &gt; li'),
          }
  
          var SliderInterval,
              currentSlider = 0,
              nextSlider = 1,
              lengthSlider = pb.items.panels.length;
  
          pb.init = function(settings) {
              this.settings = settings || {duration: 8000};
              var items = this.items,
                  lengthPanels = items.panels.length,
                  output = '';
  
              for(var i = 0; i &lt; lengthPanels; i++) {
                  if(i == 0) {
                      output += '&lt;li class="active"&gt;&lt;/li&gt;';
                  } else {
                      output += '&lt;li&gt;&lt;/li&gt;';
                  }
              }
  
              activateSlider();
              $('#control-buttons').on('click', 'li', function(e) {
                  var $this = $(this);
                  if(!(currentSlider === $this.index())) {
                      changePanel($this.index());
                  }
              });
  
          }
  
          var activateSlider = function() {
              SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
          }
  
          // Funcion para la Animacion
          pb.startSlider = function() {
              var items = pb.items,
                  controls = $('#control-buttons li');
              // Comprobamos si es el ultimo panel para reiniciar el conteo
              if(nextSlider &gt;= lengthSlider) {
                  nextSlider = 0;
                  currentSlider = lengthSlider-1;
              }
  
              controls.removeClass('active').eq(nextSlider).addClass('active');
              items.panels.eq(currentSlider).fadeOut('slow');
              items.panels.eq(nextSlider).fadeIn('slow');
  
              currentSlider = nextSlider;
              nextSlider += 1;
          }
  
          var changePanel = function(id) {
              clearInterval(SliderInterval);
              var items = pb.items,
                  controls = $('#control-buttons li');
  
              if(id &gt;= lengthSlider) {
                  id = 0;
              } else if(id &lt; 0) {
                  id = lengthSlider-1;
              }
  
              controls.removeClass('active').eq(id).addClass('active');
              items.panels.eq(currentSlider).fadeOut('slow');
              items.panels.eq(id).fadeIn('slow');
  
  
              currentSlider = id;
              nextSlider = id+1;
  
              activateSlider();
          }
  
          return pb;
       }());
  
       SliderModule.init({duration: 5000});
  
  });
  </code></pre>