title: Javascript slider shows white screens
body: <p>Hi i'm building a javascript slider for my portfolio with Javascript. The slides work properly but when i add a fading transition i keep getting a white flash between the 2 slides. Anyone knows how to create a smooth fade between them?</p>
  
  <p>I added a JSfiddle down below.</p>
  
  <p>Here's my javascript:</p>
  
  <pre><code>     $(function () {
      var theInterval; // Slide speed
      var images = new Array();
      var counter = 1;
      var defaultSettings = {
          "sliderContainer": "#slider" // SliderContainer
          , "pauseWithMouse": true // Turn on/off pause with mouse
          , "sliderSpeed": 3000 // Slide speed
          , "transitionSpeed": 200 // transition speed
      };
      // intialize slider   
      // if myImages exists then
      images = myImages;
      if (images.length &gt; 0) {
          $(defaultSettings.sliderContainer).append('&lt;img id="sliderImg" width="900" src="' + images[0] + '" /&gt;');
          startSlide(images);
      }
  
      function cycleImages(images) {
          if (counter &gt;= images.length) {
              counter = 0;
          }
          console.log(counter);
          document.getElementById("sliderImg").src = images[counter];
          counter++;
          var images = $('#sliderImg')
          var now = images.filter(':visible')
          var next = now.next().length ? now.next() : images.first()
          var speed = defaultSettings.transitionSpeed; //Transition speed
          now.fadeOut(speed);
          next.fadeIn(speed);
      }
  
      function startSlide() {
          console.log('start');
          theInterval = setInterval(function () {
              cycleImages(images);
          }, defaultSettings.sliderSpeed);
          // Set interval time
      };
      var stopSlide = function () { // Stop slides on hover
          console.log('stop');
          if (defaultSettings.pauseWithMouse) {
              clearInterval(theInterval);
          }
      };
      $('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
          stopSlide();
      });
      $('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
          startSlide();
      });
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/t9ezr8wr/" rel="nofollow noreferrer">The JS Fiddle Link</a></p>