Производительность простого слайдера jQuery

Question

Я изучаю jQuery, и я пытаюсь сделать слайдер с нуля. Несмотря на то, что он работает, производительность не такая гладкая, как хотелось бы. Я даже пытался играть с кешем DOM, но производительность все еще не идеальна.

Как я могу улучшить его и, если возможно, как я могу сократить код еще больше?

'use strict'; 
 

 
var $slider = $('#slider'); 
 
var $slides = $('#slides'); 
 
var $slide = $('.slide'); 
 

 
var slideWidth = $(window).width(); 
 
$('#slider, #slider img').css({ 
 
    'width': slideWidth 
 
}); 
 

 
var slidesWidth = slideWidth * ($('.slide').length + 1); 
 
$slides.css({ 
 
    'width': slidesWidth 
 
}); 
 

 
var currentSlide = 1; 
 

 
$(function() { 
 
    var animationSpeed = 1600; 
 
    var pause = 5000; 
 

 
    setInterval(function() { 
 
     $slides.animate({ 
 
      'margin-left': '-=' + (slideWidth + 5.5) 
 
     }, animationSpeed, function() { 
 
      currentSlide++; 
 
      if (currentSlide === $slide.length) { 
 
       currentSlide = 1; 
 
       $slides.css({ 
 
        'margin-left': '0' 
 
       }); 
 
      } 
 
     }); 
 
    }, pause); 
 
});

*, *::after, *::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; } 
 
    
 
body { 
 
\t margin: 0; 
 
    padding: 0; 
 
    min-width: 320px; 
 
} 
 

 
#slider { 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0;  
 
} 
 

 
#slides { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.slide { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- HTML relevant segment --> 
 

 
<div id="slider"> 
 
    <ul id="slides"> 
 
     <li class="slide"><img src="http://bit.ly/1ez08le"/></li> 
 
     <li class="slide"><img src="http://bit.ly/1ez08le"/></li> 
 
     <li class="slide"><img src="http://bit.ly/1ez08le"/></li> 
 
     <li class="slide"><img src="http://bit.ly/1ez08le"/></li> 
 
     <li class="slide"><img src="http://bit.ly/1ez08le"/></li> 
 
    </ul> 
 
</div>

Answer 1

спасибо за оперативные комментарии.

@metamorph_online: Существует интернет версия, использующая все .jpg в: www.crypto777.com

@jcuenod: Что анимировать являются #slides контейнер, который должен быть установлен в ширину, вычисленная в этом случае через jQuery, основанный на ширине окна просмотра (в которой также отображаются слайды). Я не мог найти способ сделать его более эффективным, но я был бы рад услышать идеи о том, как это сделать :)

Кроме того, если кто-то может прокомментировать, как улучшить кеш DOM, это было бы фантастично, поскольку Я ударил стену в том, что касается ее улучшения.

Спасибо, ребята.