【コピぺで作ろう】スライドするくだもの屋さん

いつの季節も美味しいフルーツ。ホームページで、擬似ショップを開店してみよう！
CDN(コンテンツデリバリーネットワーク)の技術を使って、超簡単なスライダーメニューも実装してみよう。

スライダーを使ったauオンラインショップ
https://onlineshop.au.com/

コピペだけ！簡単すぎるCDNを使った「slick slider」

【フルーツをスライドさせてみよう！】

今回は、ダウンロードも不要、jsファイルも用意せずに、オールCDN(コンテンツデリバリーネットワーク)を用いて、素早くスライダーを制作する方法をご紹介します。近年は、様々なminファイルが、CDNで手軽に利用できるようになりました。
▶︎「slick slider」公式サイト
CDNとは
CDNは、クルマのガソリンのような役目をしています。javascriptと呼ばれる動的な演出は、様々なファイルが必要になります。CDNは、すでにサーバー上に用意されているデータを、直接リンクすることで最適化を図る技術です。(ローカルであっても、インターネットが繋がっている環境であることが条件です。)

●　基本構文

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="UTF-8">
</head>
<body>
 

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

1. head内に、以下を記述する。→　slick.css、slick-theme.cssを、「CDN」からリンクする　

<!----- ビューポート---------->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- ここから、CDN---------->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

2. body内に、以下を記述する。→　くだものの画像を、並べてみよう。autoplayの中のdivが、スライダーの対象だよ。

<div class="autoplay">
<div><img src="img01.jpg"></div>
<div><img src="img02.jpg"></div>
<div><img src="img03.jpg"></div>
<div><img src="img04.jpg"></div>
<div><img src="img05.jpg"></div>
</div>

</div>

3.　body内に、以下を記述する。→　slick.min.jsを、「CDN」からリンクする

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script type="text/javascript">
 $('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll:1,
  autoplay: true,
  autoplaySpeed: 3000,
// 画像下のドット（ページ送り）を表示
  dots:true,
});
  </script>

$('.autoplay').slick({

slidesToShow: 3,

slidesToScroll:1,

autoplay: true,

autoplaySpeed: 3000,

// 画像下のドット（ページ送り）を表示

dots:true,

});

</script>

【追記】くだものの画像が、くっついてしまう場合、CSSを追記してみてください。

<style>
.autoplay img{
margin:10px;/*画像の周りに余白*/
width:95%;/*横幅に制限*/
border:0.5px solid #eee;/*周囲に薄いボーダー*/}
</style>

<style>

.autoplay img{

margin:10px;/*画像の周りに余白*/

width:95%;/*横幅に制限*/

border:0.5px solid #eee;/*周囲に薄いボーダー*/}

</style>

以上で、設定は終わりです。どうかな？うまく動き出したかな。　
▶︎サンプルを見る

【素材DL】 ▶︎くだものの素材をDLする。

今回は、300×300の大きさの画像を使っています。果物以外の画像でも、十分楽しめるので、画像の加工もトライしてみましょう。

コピペだけ！簡単すぎるCDNを使った「slick slider」

You May Also Like

にちなんくしま公式サイト

「Xmas特集」サンタさんにお願い

【スイーツ大好き】スライダー体験版