Почему слайдер дергается и как можно решить эту проблему?

$('.main__slider').slick({ 
    arrows: false, 
    infinite: true, 
    speed: 300, 
    centerPadding: '0', 
    slidesToShow: 1, 
    centerMode: true, 
    variableWidth: true, 
    focusOnSelect: true 
  });

.slick-slide { 
  margin-left: 35px; 
  margin-right: 35px; 
  cursor: pointer; 
  position: relative; 
  width: 400px; 
} 
.slick-slide img { 
  width: 100%; 
} 
.slick-slide.slick-center { 
  width: 600px; 
} 
.slick-slide.slick-center::after { 
  opacity: 0; 
} 
.slick-slide::after { 
  content: ""; 
  display: block; 
  position: absolute; 
  background: #000; 
  transition: opacity 0.5s; 
  opacity: 0.65; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
} 
 
.slick-track{ 
  transition: transform 1s; 
} 
.slick-slide{ 
  transition: width .5s; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<div class="main__slider"> 
			<div> 
        <img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt=""> 
  </div> 
			<div> 
        <img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt=""> 
  </div> 
  			<div> 
          <img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt=""> 
  </div> 
			<div> 
        <img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt=""> 
  </div> 
 
		</div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>