LogoMark.png

jQuery/Slider

jQuery Slider / Carousel

スライダー(カルーセル)の活用事例

CONTENTS


Slick

Slick|The last carousel you'll ever need

Slick の事例を紹介します。|DEMO

準備

HTML


CSS


JavaScript



BxSlider

BxSlider|jQuery Content Slider / Responsive jQuery Slider

bxSlider の事例を紹介します。|DEMO

準備

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Sample Site</title>
        <script src="jquery-xxxxx.min.js"></script>
        <script src="jquery.bxslider.min.js"></script>
        <script src="sample.js"></script>
        <link href="jquery.bxslider.css" rel="stylesheet" />
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <div id="container">
            <ul class="slider">
                <li><img src="images/01.jpg"></li>
                <li><img src="images/02.jpg"></li>
                <li><img src="images/03.jpg"></li>
                <li><img src="images/04.jpg"></li>
            </ul>
            <p>bxSlider Sample</p>
        </div>	
   </body>
</html>


CSS

/*  .slider に対して幅を定義してもうまくいきません  */
/*  幅の定義等は .slider の親要素、この場合は container に指定します  */
#container{
    max-width:800px;       
    margin: 2em auto;
}

p{
    text-align: center;
    font-size: 24px;
}


JavaScript

$(function(){
     $('.slider').bxSlider({
          auto:true,
          speed:1000,
          pager:true
     });
});

補足:ファイル構成を一般的な形に変更する場合

LightBoxとの併用等で、css や js フォルダがある場合、bxslider のファイルは以下のように配置するとよいでしょう。

その他

SLIDY

http://www.w3.org/Talks/Tools/Slidy2/

S5|meyerweb.com

http://meyerweb.com/eric/tools/s5/ 
http://meyerweb.com/eric/tools/s5/s5-intro.html  Sample

Vegas Background SlideShow|jQuery/Zepto Plugin

http://vegas.jaysalvat.com/
背景画像をスライドショーする jQuery プラグインです


他にも様々なスライダーがあります。
Google:Javascript スライダー




PAGES

GUIDE

DATA

Last-modified: 2020-02-02 (日) 18:06:50