Slick slider demo

http://community.sitepoint.com/t/how-to-make-a-mutliple-items-slider/194539/

by joshmoto

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="usp-carousel">
  <div class="usp" data-usp="Official MotoGP season book">1</div>
  <div class="usp" data-usp="Pubslished days after Valencia">2</div>
  <div class="usp" data-usp="Ready for Christmas">3</div>
  <div class="usp" data-usp="Issue &#3515 edited by Mat Oxley">4</div>
</div>

SCSS

.usp-carousel {
  .usp {
    text-align: center;
    color: black;
    border: 1px solid red;
  }
}

JavaScript

$('.usp-carousel').slick({
  arrows: false

}).on('afterChange', function(event, slick, currentSlide, nextSlide) {

  $('.slick-slide .usp', this).empty();

  var i = 0;
  var txt = $('.slick-current .usp', this).data('usp');
  var speed = 50;

  console.log(txt);

  function typeWriter() {
    if (i < txt.length) {
      $('.slick-current .usp', this).innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  }

  typeWriter();

});