Slickの基礎導入方法。wordpressでスライダーやカルーセルなど自由に設定。

23.05.26

1 CDNで設定する方法。
2 CDNを使わず、ダウンロードデータを使う方法。
3 main.jsを自作する。
4 htmlとcssを書きこむ。
5 まとめたhtmlコードはこちらです。
6 動かない場合はF12のコンソール
7 まとめ

CDNで設定する方法。

CDNとは外部ファイルをリンク1つで使用することができる仕組のことで、データファイルを使わない方法です。slickデータをダウンロードの手間が省け、高速化が期待できますがリンク先データがおかしくなった場合は、修正が効かなくなるデメリットもあります。

◆head内に以下を記入。

<!-- css -->
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- js -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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 src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

※ https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js のscriptは、
jquery本体なので、すでにある場合は記入しないように。本体がダブると動かなくなります。

ワードプレスを使わない場合はmain.jsファイルのパスを以下のように記入します！

<script src="js/main.js"></script>

1	<script src="js/main.js"></script>

CDNを使わず、ダウンロードデータを使う方法。

CDNを使わない場合はダウンロードしたslickフォルダをディレクトリ内に入れておきましょう。必要なのは「slick.css」「slick-theme.css」「slick.min.js」です。fontsファイルも入っているか確認しましょう。slickフォルダは公式サイトからダウンロードできます。「get it now」→「Download Now」

◆head内に以下を記入。

<!-- css -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css">

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/slick/slick.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

ワードプレスを使っている場合は、パスを<?php echo get_template_directory_uri(); ?>/・・・にすることを忘れずに！

main.jsを自作する。

自分でディレクトリ内の同じ階層にjsフォルダを自作し、その中にmain.jsを作っておきます。main.jsには以下3行だけを記入。

$(function () {
$(".slide-items").slick();
});

$(function () {

$(".slide-items").slick();

});

※slickのコードは2行目の$(“.slide-items”).slick();だけ。
$(function () {この中にコード書く});は、jsを使うときに囲うコードと覚えておくとよいでしょう。
.slide-itemsの箇所がクラス名になるので、ここを編集して使い分けができます。

htmlとcssを書きこむ。

htmlは以下を記入します。

 <ul class="slide-items">
   <li><img src="http://test-design.sakura.ne.jp/wp29/wp-content/themes/true-light/images/top_bnr01.jpg" alt=""></li>
   <li><img src="http://test-design.sakura.ne.jp/wp29/wp-content/themes/true-light/images/top_bnr01.jpg" alt=""></li>
   <li><img src="http://test-design.sakura.ne.jp/wp29/wp-content/themes/true-light/images/top_bnr01.jpg" alt=""></li>
 </ul>

</ul>

cssは以下を記入します。

.slide-items {
  width: 100%;
  height: 100%;
}

.slide-items img {
  width: 100%;
  object-fit: cover;
}

.slide-items {

width: 100%;

height: 100%;

}

.slide-items img {

width: 100%;

object-fit: cover;

}

まとめたhtmlコードはこちらです。

<html>
<head>

<!-- css -->
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
 <link rel="stylesheet" href="style.css">
<!-- js -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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 src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
</head>

<body>

 <ul class="slide-items">
   <li><img src="http://test-design.sakura.ne.jp/wp29/wp-content/themes/true-light/images/top_bnr01.jpg" alt=""></li>
   <li><img src="http://test-design.sakura.ne.jp/wp29/wp-content/themes/true-light/images/top_bnr01.jpg" alt=""></li>
   <li><img src="http://test-design.sakura.ne.jp/wp29/wp-content/themes/true-light/images/top_bnr01.jpg" alt=""></li>
 </ul>

<style>

.slide-items {
  width: 100%;
  height: 100%;
}

.slide-items img {
  width: 100%;
  object-fit: cover;
}


</style>

</body>
</html>

<html>

<head>

</head>

<body>

</ul>

<style>

.slide-items {

width: 100%;

height: 100%;

}

.slide-items img {

width: 100%;

object-fit: cover;

}

</style>

</body>

</html>

動かない場合はF12のコンソール

一旦これで手動で画像がスライドできるかテストしてください。上記の「まとめたhtmlコード」と「jsフォルダの中のmain.js」と「jqeury本体がダブってないか」最低でもこの３つの設定ができていれば、とりあえず動くと思います。動かない場合は、F12キーのディベロッパーツールでコンソールを見ると、原因が追究できます。パスがうまくつながってないファイルなどを発見できます。
※参考サイトはこちら