コンテンツスライダー（jquery.bxslider.js）

コンテンツスライダーを実装する際は、仕様書や問題がない限り、
99％で、bxSlider を使用しております。

メリットとしては、同一ベージに複数入れることもでき、
レスポンシブにも対応など、大体の要望を組み込めるという点だと思います。

あとは実装が容易という点でしょうか。

実装は、配布元のサイトからjQueryプラグインをダウンロードします。
http://bxslider.com/
これをHTMLに読込み。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>

大枠にクラスを付けます。
子要素は、li でも div でも何でもOK。

<ul class="bxslider">
    <li><img src="/images/pic1.jpg" /></li>
    <li><img src="/images/pic2.jpg" /></li>
    <li><img src="/images/pic3.jpg" /></li>
    <li><img src="/images/pic4.jpg" /></li>
</ul>

実行処理を書くと、これだけで動くと思います。

$(document).ready(function(){
    $('.bxslider').bxSlider();
});

CSSファイルもあると思いますが、私は、下記のみをCSSに追記して、ダウンロードしたものは使っておりません。

.bx-wrapper {
    position: relative;
    *zoom: 1;
}

 useCSS の設定

trueの時に PCサイトでスライドする度にテキストの太さが変わる。
再現する確立は、稀。
値を false にすることで、直る。

値をfalseにすると、Android（Nexus）で、動きがカクカクする。
こちらは、逆に trueにすることで滑らかになる。

onSlideAfter の設定

初期Autoで、自動実行している際、Pager や Controls をクリックすると止まってしまいますが、Callbacksを設定することで、再実行することが可能です。

var slider = $('#slider').bxSlider({
    'auto': true,
    'pager': true,
    'controls': true,
    'onSlideAfter': function(){
        slider.startAuto();
    }
});