Slick slider demo

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

by joshmoto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slick-rick">
      <div class="phrase" data-phrase="Wubba lubba dub dub!">1</div>
      <div class="phrase" data-phrase="Rikitikitavi, bitch!">2</div>
      <div class="phrase" data-phrase="And that's the wayyyyyy the news goes!">3</div>
      <div class="phrase" data-phrase="Uh ohhhh! Somersoult jump!">4</div>
      <div class="phrase" data-phrase="Hit the sack, Jack!">5</div>
      <div class="phrase" data-phrase="GRASSSSS... tastes bad!">4</div>
    </div>

SCSS

.slick-rick {
  .phrase {
    padding: { top: 1rem; bottom: 1rem; }
    text-align: center;
    color: black;
    background: lightgray;
  }
}

JavaScript

$('.slick-rick').slick({
  arrows: false

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

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

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

  console.log(txt);

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

  typeWriter();

});