作りたいから作ったシリーズ_０３　　　スライド

ハイテンションなのは続かない（学習も然り）

jQueryのプラグイン「slick」を使う

画像のスライドショーをウェブページに実装するには
jQueryのプラグイン「slick」を使うと簡単に出来ます（出来ました）

決まった内容の画像が決まった秒数毎にスライドしてくれます

実装したウェブページ

「slick」のコード（CDN版を使用）

HTML
//ヘッダーに記載して読み込ませてください
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

jQuery
//これだけでもスライドっぽいものが作れます
$(function() {
    $('.slider').slick({
       autoplay:3000,
       dots:true,
       arrows:true
    });
});

※CDN（コンテンツデリバリネットワークの略）
　ソースコードをネットワークを介して他のPCから読み込んで使う仕組み

スライド違いだけどある意味スライド

jQueryを使ってボタンを押した際に指定の場所までスライド移動する仕組み
前回の「上に戻る」ボタンと似ています

赤枠で囲ったボタンを押すと

お問い合わせボタンの位置までスライド移動します

使用したコード​など（HTMLは画像です）

赤枠で囲った部分が対応している

jQuery
//クリックされた際に設定してあるhrefの要素を代入してスクロールする位置を特定
$(function() {
    $('header a').click(function(){
       var id = $(this).attr('href');
       var position = $(id).offset().top;
       $('html,body').animate({
         'scrollTop':position
       },500);
    });
});

職場等で活かすとしたら？

PCとモニターを接続して、デジタルサイネージっぽいものが作れるかも？
小売業なら店舗の入り口に置いて「イベント告知」「チラシ広告」「タイムセール告知」などに使えるかもしれない（筆者は小売業従事）

バックナンバー

前回の記事