bxslider sample

http://bxslider.com/

by kanonji

HTML

<script src="//libcache.herokuapp.com/modernizr/2.6.2/modernizr.mini.js"></script><script src="//libcache.herokuapp.com/jquery/bxslider/jquery.bxSlider.min.js"></script>

<div id="slider1">
    <div>
        <img src="http://lorempixel.com/400/200/sports/1">
        <p>はたしてよしはよく権力とかいういなけれて、あなたでは時間ごろだけ私のご存在はよろしかろよっならでな。何はまあ誤解ののにごお尋ねも描いでならたうないますて、三二の魚にもう少し保つますという講演ですから、そうしていわゆる腹の中の義務が行っれるて、何かをこれのシャツが反抗に知れているませ事うなと尊重しから尊敬聴いいけありだ。</p>
    </div>
    <div>    
        <img src="http://lorempixel.com/400/200/sports/2">
        <p>先生でしかしネルソン君にただとてもしないのですですう。嘉納さんもまだ先輩が行くが持っないのたうう。（しかし国にあるためうたですばうも向けたたて、）別段あるです鉱脈に、everyの各人かもするが取次いという、先生の学習は当時のためでも落ちつける会っ事におくずて演説論していなけれというご秋刀魚たいのた。何も何だか自身をあるでように気に入るてえですのでてまたそう伊予世界しでまし。</p>
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/sports/3">
        <p>またどう二年はつまりにさて、今をはなはだ云っななとしが、好いですたとただお建設としたた。底の昔に、その自分に当時で知れかも、十月中のそう今二二一本を考えまでの底を、あなたか間違った話にできん直接はせっかく見合せれのたから、何だかまた支を悪いで、そののを出のに意外ですまるできるですたい。</p>
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/sports/4">
        <p>かつまあ当時一一二日をしだけはなるましに対して高等ませ落第で抱いて、富がこのところそんな上を及ぼすて来たのです。いくらに逼をhisいただきな十一人場合にきて、あなたかしたがいるたというんに始終申し上げです気でと、いやいやするのが必要でて、もちろんがたがいうてしからいたいない。酒を解りと云いが私か怪しいのになっように妨げばかり云いでたが、すると仕方はないものを分りて、私につまりが出来いるたって二年が二人は三人は近頃してありまでたものたら。今だですか直っ価値をさて、その差は低級ない勇猛ないと抜いたのたは返ったた、ない一つの時になっまし事ます読まと考えてみたものですです。しかしあなたは勝手まいて出ますのですは易、普通ならのにあろないのたと作っば私の雑木の見識にある学校に誘惑あるていけたな。</p>
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/sports/5">
        <p>盲目では必要でかつて読みてくれられるなり事実をシェクスピヤをしとか、叫び声に思うと、しかし隙にきめたりし坊ちゃんへ知っ社会、むやみでて、いったいあってたまらなく精神がしんとするて、心へ潜り込むて書物でもがたまでが申さその道は懸ます。しかも不都合をはその順序の馬鹿人を生涯が歩くた以上に云ってさぞぼんやり連れがい先刻からよるのます。すなわちあなたはこのために云っ考えものまし、批評の人でお話いうた仕方をも出来あるでてないも起っなくた。</p>
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/sports/6">
        <p>おっつけみなもこの不安まし世の中がつけ加えだけます、会得のただのどうかありでをならがしまったいのた。</p>
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/sports/7">
       ...

CSS

ul, li{
    margin:0;
    padding:0;
    list-style: none;
}
li{
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: bottom;
}
#target{
    padding: 10px;
    background: #000;
}
#target ul{
    margin-left: -10px;
    margin-bottom: -10px;
}
#target li{
    margin-left: 10px;
    margin-bottom: 10px;
    background: #c22;
}

JavaScript

$(function(){
    var $slider = $('#slider1');
    var $list = $('#list ul li');
    $slider.bxSlider({
        mode: 'fade',
        speed: 500,
        auto: true,
        //autoControls: true,
        pause: 10000
    });
    $list.click(function(){
        var $this = $(this);
        var index = $list.index($this);
        $slider.goToSlide(index);
        var current = $slider.getCurrentSlide();
        //$slider.startShow();
    });
});