jQuery入門--スライダー

スライダー

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jQuery--2.2.4

【slickの導入】
slickはjQueryベースの、スライダーを作成するためのプラグインです

【 slickのダウンロード】

【インストール】
任意のフォルダ（slick）を選び、slick-1.8.1.zipをクリクすると、インストールされる。

【VScodの設定】


「fonts」フォルダから「css」フォルダに、2つのファイルを移す
slick-theme.css
slick.css

「fonts」フォルダから「js」フォルダに,一つのファイルを移す
slick.min.js

「imde」フォルダには、好きな絵を4枚入れる

【スライダーを作ってみる】

◆動作
1.手動でスクロール出来、尚且つ5秒経つと、自動でスクロールする
2.何枚目かを点で表示する

まず、メインの「index.html」ファイルにコードを書く

次に、「css/style.css」ファイルにコードを書く

body {
　/*中央の位置になる*/

     margin:0 auto;

     

}

.slider {

    width: 80%;

    /*margin:値1(上下) 値2（左右）;*/

    margin: 30px auto;

}

img {

    width: 80%;

    margin: 0 auto;

}

次に、「css/slick-theme.css」ファイルのコードを一部変更する
・矢印の変更箇所

/* Arrows */

.slick-next:before

{

   

    /*変更：フォントサイズ*/

    font-size: 40px;

    line-height: 1;

    opacity: .75;

    /*変更：緑色*/

    color: rgb(88, 151, 59);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

.slick-prev

{

    /*変更*/

    left: 100px;

    /*追加*/

    z-index: 100;

}

.slick-next

{

    /*変更*/

    right: 100px;

    /*追加*/

    z-index: 100;

}
「image」フォルダは、同じサイズの画像を選び
bird01.jpg
bird02.jpg
bird03.jpg
bird04.jpg
とする。何でも良い

「js/スライダー.js」ファイルにコードを書く

$(function(){

    //スライダー

    $(".slider").slick({

        autoplay:true,

        //スライダーのスピード

        autoplaySpeed:5000,

        //矢印

        arrow:true,

        //ドット

        dots:true

    });

})

以上

【カスタマイズする】

・「css/style.css」ファイルにコードを変更

img {

　/*80→100に変更*/

    width: 100%;

    margin: 0 auto;

}

「js/スライダー.js」ファイルにコードを書き換える

$(function(){

    //スライダー

    $(".slider").slick({

        autoplay:true,

        //スライダーのスピード

        autoplaySpeed:5000,

        //矢印

        arrow:true,

        //ドット

        dots:true,

        //スライドを中央配置にする

        centerMode:true,　　

       //前後の要素幅

        centerPadding:"150px"

    });

})

 

【サムネールを付ける】

「index.html」のコードを書き換える

「スライダー.js」のコードを書き換える

$(function(){

    //スライダー

    $(".slider").slick({

        autoplay:true,

        //スライダーのスピード

        autoplaySpeed:5000,

        //矢印

        arrow:true,

        //ドット

        dots:true,

        //スライドを中央配置にする

        centerMode:true,

        //前後の要素幅

        centerPadding:"150px"

    });

    $(".nav").slick({

        //スライダーのナビの指定

       asNanFor:".slider",

       //一度に表示できるコンテンツの数

       slidesToShow:4,

       focusOnSelect:true

    })

})

以上