jQuery slickスライダー実装メモ


 

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

<?php  wp_head();  ?>

</head>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<body>

wp_head();の前でスタイルシートを読み込む。

wp_head();のあと、</head>のあと、<body>タグの前でslick.min.jsファイルを読み込む。




jQuery(function(jQuery){

jQuery('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
});

jQuery(function(jQuery){

jQuery('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  arrows: false,
  centerMode: true,
  focusOnSelect: true
});
});

jQuery(function(jQuery){

jQuery('.slide_selector').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
 });
});


//TOPのスライダー画像
jQuery(function(jQuery){

jQuery('.slide_top').slick({
  fade: true,
  autoplay: true,
  autoplaySpeed: 3000,
  dots: true,
  infinite: true,
  speed: 500,
  cssEase: 'linear',
  arrows: false
 });
});

テーマのjsファイルに上記のような感じでHTMLに記述したclass(.)またはid(#)を指定してjQueryの記述をする。

HTML↓(//TOPのスライダー画像の方)



 <ul class="slide_top">
 <li><img src="/hogehoge.jpg"></li>
 <li><img src="/hogehoge.jpg"></li>
 <li><img src="/hogehoge.jpg"></li>
 </ul>

参考サイト
参考:http://cly7796.net/wp/javascript/plugin-slick/