title: jQuery Image slider showing second image two times
body: <p>Currently trying to get a slider working for a website and I can't seem to understand why my slider is showing the second image twice in a row but from then on out it works perfectly.</p>
  
  <p>Heres my jQuery:</p>
  
  <pre><code>$(document).ready(function(){
  var bgArr = ["https://d17fnq9dkz9hgj.cloudfront.net/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
              "https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg",
              "https://img.buzzfeed.com/buzzfeed-static/static/2015-03/3/16/enhanced/webdr09/enhanced-7711-1425417143-1.jpg?downsize=715:*&amp;output-format=auto&amp;output-quality=auto",
              "https://www.bluecross.org.uk/sites/default/files/styles/image_slice_small/public/assets/images/112970.jpg?itok=qh9iUCOb"]; 
  
  var i = 0;
  
  var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')').css('right', '0%');
  var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')').css('right', '-100%');
  
  var bgSlide = function($bg) {
      $bg.animate({ right: '+=100%' }, 600, function(){ 
          if(parseInt($bg.css('right')) &gt; 0) {
              $bg.css('right', '-100%');
              (i &lt; bgArr.length-1) ? i++ : i=0;
              $bg.css("background-image", "url("+bgArr[i]+")");
          }                           
      } );
  }
  
  setInterval(function() {                
      bgSlide($bg1);
      bgSlide($bg2);                          
  }, 2500);
  </code></pre>
  
  <p>});</p>
  
  <p>Here it is in action: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   var bgArr = ["https://d17fnq9dkz9hgj.cloudfront.net/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
         "https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg",
         "https://img.buzzfeed.com/buzzfeed-static/static/2015-03/3/16/enhanced/webdr09/enhanced-7711-1425417143-1.jpg?downsize=715:*&amp;output-format=auto&amp;output-quality=auto",
         "https://www.bluecross.org.uk/sites/default/files/styles/image_slice_small/public/assets/images/112970.jpg?itok=qh9iUCOb"]; 
   
      var i = 0;
     
   var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')').css('right', '0%');
   var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')').css('right', '-100%');
     
   var bgSlide = function($bg) {
    $bg.animate({ right: '+=100%' }, 600, function(){ 
     if(parseInt($bg.css('right')) &gt; 0) {
      $bg.css('right', '-100%');
      (i &lt; bgArr.length-1) ? i++ : i=0;
      $bg.css("background-image", "url("+bgArr[i]+")");
     }       
    } );
   }
     
   setInterval(function() {    
    bgSlide($bg1);
    bgSlide($bg2);       
   }, 2500);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   position: relative;
   background: transparent;
   height: 90vh;
      overflow-x: hidden;
  }
  .background-1, .background-2 {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: transparent;
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0 auto;
      background-position: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="background-1"&gt;&lt;/div&gt;
  &lt;div class="background-2"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(Just grabed images from the internet for placeholders)</p>
  
  <p>Id love some help.</p>