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) {
	
  // empty's html from all slides
  $('.slick-slide .phrase', this).empty();
	
  // counter
  var i = 0;
  
  // the text pulled from slide data attribute
  var txt = $('.slick-current .phrase', this).data('phrase');
  
  // typing speed
  var speed = 50;
	
  console.log(txt);

	// the function to type the data phase out
  function typeWriter() {

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

});