いつの季節も美味しいフルーツ。ホームページで、擬似ショップを開店してみよう！
CDN(コンテンツデリバリーネットワーク)の技術を使って、超簡単なスライダーメニューも実装してみよう。
スライダーを使ったauオンラインショップ
https://onlineshop.au.com/
コピペだけ！簡単すぎるCDNを使った「slick slider」
【フルーツをスライドさせてみよう！】
今回は、ダウンロードも不要、jsファイルも用意せずに、オールCDN(コンテンツデリバリーネットワーク)を用いて、素早くスライダーを制作する方法をご紹介します。近年は、様々なminファイルが、CDNで手軽に利用できるようになりました。
▶︎「slick slider」公式サイト
CDNとは
CDNは、クルマのガソリンのような役目をしています。javascriptと呼ばれる動的な演出は、様々なファイルが必要になります。CDNは、すでにサーバー上に用意されているデータを、直接リンクすることで最適化を図る技術です。(ローカルであっても、インターネットが繋がっている環境であることが条件です。)
● 基本構文
1. head内に、以下を記述する。→ slick.css、slick-theme.cssを、「CDN」からリンクする
2. body内に、以下を記述する。→ くだものの画像を、並べてみよう。autoplayの中のdivが、スライダーの対象だよ。
3. body内に、以下を記述する。→ slick.min.jsを、「CDN」からリンクする
【追記】くだものの画像が、くっついてしまう場合、CSSを追記してみてください。
以上で、設定は終わりです。どうかな？うまく動き出したかな。
▶︎サンプルを見る
【素材DL】 ▶︎くだものの素材をDLする。
今回は、300×300の大きさの画像を使っています。果物以外の画像でも、十分楽しめるので、画像の加工もトライしてみましょう。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。