【スライドショー】画像を自動的に切り換える方法|Webデザイナー専用メディアWEBDESIGNWEBデザイナーについて考えてみました。今回のテーマは「画像の切り替え(スライドショー)」についてです。近年のコーポレートサイトの傾向として、スライドショーを使っている企業が多いです。以下のようなサイトがあります。参考URL:https://japantaxi.co.jp/このように、最近ではスライドショーを使っているサイトが多いため、このテクニックを習得しておくことはかなり効果的です。本記事では、画像を切り替える方法と実際に書いたコードもご紹介していきます。参考にしてみてください。画像を切り替える方法(スライドショー)はいくつかありますが、今回は3つご紹介していきます。本記事では、紹介しませんが、スライドショーならば「Bootstrap」にもありますので、そちらを使ってもらうことも選択肢の1つです。Javascriptまず画像を切り替える際の代表的な言語として、JavaScriptがあります。使うコードとしては、setIntervalを使用します。実際に書いたコードがこちら。4000);}setIntervalは「繰り返し」がキーワードになります。そのため、上記のコードでは、取得いているimgを永遠に繰り返して表示するという意味になります。Jquery2つ目の方法として、jQueryがあります。jQueryはslick(ライブラリ)という便利なツールがあります。このツールを使用することで、上記で数行ほど書いていたコードが2,3行で終わります。実際に書いたコードがこちらです。});上記ではつらつらと書いてましたが、このライブラリーを使うとたったの3行です。本当に便利なので使ってみる価値はあります。スライドショーの原理原則を知りたいという方は、あえてJavaScriptでやってみるのが良いと思います。slickの導入方法slickの導入方法以下の通りです。2019slickのダウンロード方法は以下の3ステップです。slickをこちらからダウンロードして解凍slickフォルダをhtmlファイルと同じ階層に入れるhtmlファイルで必要なslickファイルを読み込ませる3番目の「htmlファイルで必要なファイル」は以下の通りです。slick/slick.cssslick/slick-theme.cssslick/slick.min.js最後に、これらを読み込ませるコードがこちら。src="slick/slick.min.js"></script>上記の3つのファイルに加えて、jQueryも読み込んでおいてください。最後に、実際に作ったスライドショーを載せておきます。本記事は以上となります。スライドショーができるとWEBデザインの幅は広がってくるので、ぜひトライしてみてください!【具体例アリ】独学でWEBデザイナーになる方法をご紹介!独学でWebデザインの案件を獲得する方法を解説しています。勉強方法・営業の仕方など、実際に案件を取ってくるまでにやってきたことをまとめています。Webデザイナー専用メディア。