slick sliderをWORDPRESSで使う【コピペOK】

目次（もくじ）

slickのスライダーをWORDPRESSで使う

最も簡単なCDNを使って作成するスライダー

slickのcssのCDN

header.phpにコピーします。slick-theme.min.cssの方も入れておかないとスライダーのドットや矢印のcssが反映しません。
最新バージョンはこちらのgei it nowより@1.8.1の数字を確認して下さい。(2022年10月現在）

header.phpにコピー

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

jQueryCDN

jQUERYの最新バージョンはこちら(jQueryのCDNは色々なところから出てますがgoogleの速度が最も速いとあるので、こちらから使用するのがよいと思います。特に理由がなければ下記の3ｘスニペットのコピーでOKです。
footer.phpにコピーします。jQUERYのCDNとslic、jsのCDNと両方必要です。（2022年10月現在）

3.x スニペット:<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

2.x スニペット:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

1.x スニペット:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

slick.jsのCDN

最新バージョンはこちらのgei it nowから@1.8.1の部分を数字を確認して下さい。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

footer.phpにコピー

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
    $('.slider').slick({
       autoplaySpeed:2000,
       speed:3000,
       autoplay:true,
       Infinity:true,
       slidesToShow:1,
       slideToscroll:1,
       arrows:true,
		dots:true,
    });
 </script>

HTMLはこちら下記よりコピー

<ul class="slider">
<li class="slider-item"><img src="https://drive.google.com/uc?export=view&id=1G7zeotJ6w6h5NsdfA9MpZEinbA45fCBG"></li>
  <li class="slider-item"><img src="https://drive.google.com/uc?export=view&id=1uNRvtgX89B3KmQHGJQpLDoNPgFH1oCOu"></li>
  <li class="slider-item"><img src="https://drive.google.com/uc?export=view&id=1Cp3Jobqybs2KGKm7DTutvmZkWi7c-50Y"></li>
  <li class="slider-item"><img src="https://drive.google.com/uc?export=view&id=135lHXV8_QtuyrKtCH_vo7kK8D-6yw45L"></li>
</ul>