KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】デモサイトを作って自分の作品を公開するまでの道のり#3「jQueryでスライドショーを作る」

この記事をシェアする

前回まで

前回はサイトの骨格までを作りました。

www.kimuson.com

よくある縦スクロールのサイト。

JavaScriptとかで動的にとかにはまだできていないので、今日からここにどんどん動的な表現を載せていこうと思ってる。

とはいえ、いろいろ実験しつつ組み込んでいきたいので、まずは動的な表現の入門でもある「スライドショー」を作ってみた。

もしおしゃれにできたらヘッダー画面の場所に差しこもうと思っている。

今日やったこと

結果的には以下のようなものを作りました。

f:id:samuraikid520:20180207233010g:plain

いちよう一定の秒数が経つと自動で画像が変わります。

あとはボタンを押して特定の画像を見ることも可能です。

作り方

作り方は以下のサイトを参考にさせていただきました。
techacademy.jp

ちなみにライブラリはslick.jsを使用しています。
kenwheeler.github.io

「スライドショー」の作り方を調べるといろんなライブラリが出てくるのでなんでもよかったんですが、とりあえずお試しでslick.jsを使ってみました。

実装自体は非常に簡単で、以下jsをhtmlで読み込めば実装できます。

$(function(){
  $('.single-item').slick({
    accessibility: ###,
    autoplay: ###,
    autoplaySpeed: ###,
    dots: ###,
    fade: ###,
  });
});

まとめ

今日はお試しで使ったので、デザインとか特に気にせず実装しましたが、そこまで悪くないのでデモサイト側に取り込んでみようかと思います。

次はどんな動的表現をやっていこう。。。

おそらくハンバーガーメニューとかその辺をやるかもしれません。