実技　JavaScript（jQuery）実習①

By その他

-本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習①
jQueryのプラグイン

2限目
実技　JavaScript（jQuery）実習①
JavaScriptのアレンジ

3限目
実技　JavaScript（jQuery）実習①
作品制作

4限目
実技　JavaScript（jQuery）実習①
作品制作

5限目
実技　JavaScript（jQuery）実習①
作品制作

本日のテーマ

スライドショーを作成してみましょう

jQueryを使ったスライドショーはたくさん配布されています。その中でも今回は人気の「slick」と言うプラグインを実装します。

【配布元】※英語

【解説サイト】※日本語

解説サイトは、記述が省略されていたり、古い情報のままの場合があり、解説通りに記述しても上手くいかない場合があります。
それを念頭に、なるべく新しい記事を参考にする、複数の解説サイトを読むようにしましょう。

STEP.1 配布元からダウンロード

get it now > Download Now をクリックして「slick-1.8.1」をダウンロード

STEP2. slickフォルダをコピペ

「slick」フォルダには実装に必要ないものまで入っていますが、今回は全てコピーしましょう。

STEP3. HTMLのheadのstyle.cssのリンクの後に記述

<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

slick.jsとslick.min.jsは同じもので、slick.min.jsは圧縮版（minified）でファイルの容量を限りなく小さくして読み込み時間を高速化しています。
私たちは、JavaScriptの本体の記述を変えることはしないので、min.jsの方をリンクさせましょう。

STEP4. HTMLを記述

<ul class="slider">
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/6173_s.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/72148_s.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/346401_s.jpg" alt="image03"></a></li>
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/372256_s.jpg" alt="image04"></a></li>
</ul>

STEP5. JavaScriptを記述

<script>
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:1000,
    });
</script>

上手くできない場合は、パスの書き方、記述場所に誤りがないか確認してください。
上手くできたら、これを元にアレンジして行きましょう！

STEP.6 slick-theme.cssの最後に見た目を整える為のcssを記述

ulの隙間をリセット。(style.cssにリセットcssが入ってる場合は不要)
スライダーの幅を画面の80%に。
矢印のアイコンをデフォルトが白なので黒に変更。

/*ここから追加*/

ul {
    padding: 0;
}
.slider{
    margin: 0 auto;
    width: 80%;
}
.slider img{
    height: auto;
    width: 100%;
}
.slick-prev:before,
.slick-next:before {
    color: #000;
}

注意点1. CDNについて

注意点2. httpsの省略について

パスを書く時オンラインだと、下記のようにhttps: または http: を省略することができます。ローカルでの構築段階では、省略すると動きませんので、https:を付けておきましょう。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

オプションを書きましょう(script)

{}の中にプロパティと値を書きます。
セレクタ:値,
例>autoplay:true,

.sliderの部分はHTMLのclass名またはid名と合わせましょう。

<script>
$('.slider').slick({

    });
</script>

矢印をカスタマイズ

prevArrow: '<button type=”button” class=”slick-prev”>Previous</button>',
nextArrow: '<button type=”button” class=”slick-next”>Next</button>',

矢印を画像にしてデザインを整えた例

画像を作成し、imagesフォルダに保存

オプションにimgタグで画像のパスを記述

  prevArrow: '<img src="images/arrow-pre.png" class="slide-arrow prev-arrow">',
  nextArrow: '<img src="images/arrow-next.png" class="slide-arrow next-arrow">',

slick-theme.cssの一番下に記述

.slide-arrow{
    position: absolute;
    top: 50%;
    margin-top: -50px; /*画像の高さの半分*/
    z-index:999999; /*ボタンを最前面へ*/
}
.prev-arrow{
    left: 0;
}
.next-arrow{
    right: 0;
}
img.prev-arrow,img.next-arrow{
    width: 50px;
    opacity:0.5;
}
img.prev-arrow:hover,img.next-arrow:hover{
    opacity:1.0;
}