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

cocohp

4年前

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

今回は、ダウンロードも不要、jsファイルも用意せずに、オールCDN(コンテンツデリバリーネットワーク)を用いて、素早くスライダーを制作する方法をご紹介します。近年は、様々なminファイルが、CDNで手軽に利用できるようになりました。

まずは、「slick slider」公式サイトをご紹介します。

githubから必要データをDLする方法もありますが、CDNを使ってみましょう。

CDNとは
CDNはContent Delivery Networkの略で、「コンテンツ配信ネットワーク」の意味。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みのこと。CDNサービスは、CDNの仕組みを利用して、企業向けに画像や動画を多用するWebサイトの配信を代行するサービスを指す。

CDNサービスの事業者は、キャッシュサーバーをインターネットのIX（相互接続点）に近い位置や、大手プロバイダーのネットワーク内などに配置するので、企業のWebサーバーと自動的に同期できる。

DNS設定をすれば、オリジナルのWebサーバーへのアクセスがCDN事業者のキャッシュサーバーへ振り分けられるため、キャッシュサーバーがオリジナルのWebサーバーに代わってコンテンツを配信する。また、Webサーバーへのアクセスを代理するため、アクセスが集中する場合でもWebサイトの負荷を軽減できる。
(出典/IT用語辞典)

要は、すでにサーバー上に用意されているデータを、リンクすることで最適化を図る技術です。ローカルであっても、ネットが繋がっている環境であることが条件です。

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">

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

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

</div>

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>

1
2
3
4
5
6

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

以上で、設定は終わりです。どうかな？うまく動き出したかな。　

︎サンプルを見る

︎ くだものフリー素材

scriptの記述を変えるだけで、スライダーのデザインも変更できます。公式サイトで確認してみてください。