Slick Curseur à Côté des Flèches montrant pas

Je vais essayer d'obtenir le précédent et suivant des flèches pour montrer jusqu'à côté du produit curseur, tout comme dans la Nappe Curseur exemple. Mais mon échantillon ne semblent pas en charge les polices appropriées pour que cela se produise.

Voici mon code:

HTML

  <div class="slider">
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100">
      </div>
    </div>

CSS

  body{
    background-color: #fff;
  }
  .slider{
    margin: 60px auto;
    width: 500px;
  }
  div{
    height: 100%;
  }
  p{
    text-align: center;
    font-size: 12px;
    color: white;
  }

JavaScript

$(document).ready(function(){
        $('.slider').slick({
            centerMode: true,
            centerPadding: '60px',
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 1,
            arrows: true
        });
      });

DÉMO:
http://jsfiddle.net/schwany23/j39j568c/

OriginalL'auteur Schwan Park | 2015-03-11