slickで画像をスライドにする
こんなのをつくる方法
画像をスライドさせたいなーとか思ったときに使うのがslickというフレームワーク。
「slick 使い方」とかでググってもよくわかんねーよ！みたいなちょっと前の僕みたいな人のために丁寧な説明をしようと思います。
slickの導入
書くのめんどいのでしばらくお待ちを。
公式サイトからファイルのDLくらいは出来るよね？
使い方
色んな使い方があるけど、とりあえず初心者向けにこれをやったら画像のスライドつけれるぜ。って使い方を書きます。
使い方は一番シンプルに使うならこんな感じ。
- 画像を用意します。
- スライドさせるのに必要なファイルをサーバーの中につっこみます。（コードの下に詳しく書きます。）
- 下記のコードをhtmlとして書き込んでください。
<link href="(あなたのサーバーのファイル保存先)/css/slick-theme.css" rel="stylesheet" type="text/css">
<link href="(あなたのサーバーのファイル保存先)/css/slick.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="あなたのサーバーのファイル保存先)/js/slick.min.js"></script>
<ul class="slider">
<li> <img src="(画像のパス)" alt="" class=""/></li>
<li> <img src="(画像のパス)" alt="" class=""/></li>
<li><img src="(画像のパス)" alt="" class=""/></li>
<script>
$('.slider').slick();
</script>必要なファイルをぶちこんでそのパスを入力できたら、あとは画像指定すればスライドするようになってるハズ。
もっと初心者向けに
(あなたのサーバーのファイル保存先)
サーバーって何？みたいな人はもう問い合わせフォームから直接連絡ください。時間取れるときに手取り足取りおせっかいします。
WordPressなら、テーマが格納されてるディレクトリ（フォルダ）のパスで良いと思います。
「パス」って言葉もよくわかんねーよって人のために噛み砕きまくりますね。ざっくりいうと、
パス＝ファイルの住所 です。
[https://なんとか.com/wp-content/themes/使用中のテーマ名/]
こんな感じ。↑なら、このテーマのデータはここにありますよってことです。
ここに[css]ってディレクトリを作りましょう。
で、公式サイトからDLしたzipを展開した中にある下記のファイルを入れましょう。ちょっと探せば見つかるハズ。
- slick.css
- slick-theme.css
同様に、[js]ってディレクトリを作りましょう。
で、また同様に下記ファイルを入れましょう。
- slick.min.js
ファイルを入れたら、そのファイルが保存されてるパスに上記コードを書き換えます。
（画像のパス）
もうパスはいいですよね？
次は画像の保存先です。
WordPressをご利用なら、普通に画像を挿入したあとに[htmlとして編集]とかしてみたら…
)
こんな部分が見つかると思うので、それを上記コードにコピペでOK！
スライド完成！でも？
なんか寂しいなとか思ったら下記の部分
<script>
$('.slider').slick();
</script>ここをカスタムすることができます。
<script>
$('.slider').slick({
autoplay:true,
autoplaySpeed:5000,
dots:true,
});
</script>例えばこれにすると、時間で勝手にくるくるします。カスタマイズに関してはいろんなサイトがあるのでお勉強してみてくださいね！
このサイトでもその内まとめておきます。まとめたらリンクでも貼っときます。
まぁ自分で作業しなくてもサイトは作れるっちゃ作れます。
「俺はサイト制作がやりたいんじゃないんだよ！アフィリエイトをやってみたいんだよ！」
って感じのあなたにはサイト制作自体は他の人に頼むのをオススメします！
制作代行サービスなどを使った方が高クオリティ・スピードアップになるかもしれませんね！
x-nearの文句は俺に言え！
ここがわかりにくいよー。
とかそんなご意見、お待ちしております。
個人的にちゃんと教えてくれ！って初心者さんも是非！
僕もまだまだ初心者なので、一緒にもっとにぁにぁしましょ！
スポンサーリンク
