カルーセル・カルーセル wordpressでカルーセル

カルーセル（メリーゴーランド）と言うと画像がぱらぱら送るそんな物である。
そいつをwordpressで使う方法ってのをちょっと考えた。
ていうのも仕事でtable内に仕込もうとするとなぜか崩れたのでwordpressでは？と思ったわけである。
実際に組み込んだので下にある。

一番悩んだのはjqueryとslickとの呼び出し順である。
必ず、jquery → slickとする。

それ以外はfont周りがおかしい場合があるのでその時はslick-theme.cssを抜いてみるとかするといいである。

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.3.0.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

<script type="text/javascript">
$(function() {
$('#sample').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  dots: true,
});
});
</script>

<div id="sample">
 <div><img width="320" src="http://35.78.51.61/wp-content/uploads/2014/10/img-20141023-00101.jpg"></div>
 <div><img width="320" src="http://35.78.51.61/wp-content/uploads/2014/07/img-20140728-00070.jpg"></div>
 <div><img width="320" src="http://35.78.51.61/wp-content/uploads/2014/05/image5.jpg"></div>
 <div><img width="320" src="http://35.78.51.61/wp-content/uploads/2014/04/img_1176.jpg" /></div>
</div>