シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN

標準でもしくはオプションで実現できそうなこと

スワイプ
キャプション表示
サムネイルナビゲーション
高さ自動調整
複数表示のカルーセル
縦スライド
など

スクリプト

<link href="jquery.bxslider.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.bxslider.min.js" type="text/javascript"></script>

実装

<div id="div1153">
    <ul class="bxslider">
        <li><img src="画像1" title="キャプション1" /></li>
        <li><img src="画像2" title="キャプション2" /></li>
        <li><img src="画像3" title="キャプション3" /></li>
    </ul>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.bxslider').bxSlider();
});
</script>

画像に合わせてwidthを調整できるようにする

スクリプトでulにラッパーDIV(class="bx-wrapper")が生成され、width:100%が設定されます。
なので、さらに上位にラッパーをつくっておいてそこに横幅を設定しておきます。max-にしておくとレスポンシブを崩さないでおけると思います。

#div1153 {
    max-width: 400px;
}

デモ

オプション

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
    mode: 'fade',         // スライド効果 'horizontal'(デ)：横にスライド / 'vertical'：縦にスライド / 'fade':フェードスライド
    touchEnabled: false,  // スワイプ効果 true(デ)：有効
    adaptiveHeight: true, // 高さ自動調整 false(デ)：無効
    captions: true        // キャプション表示 false(デ)：無効
});});
</script>

Related

親要素の大きさに合わせて画像をリサイズ「imgLiquid」 カルーセル プラグイン レスポンシブ対応の画像スライダー・ギャラリー用プラグイン 画像ギャラリーを実装できる「Galleria」 表示パターン豊富なスライダー「flexslider 2」 スワイプ対応の画像スライダー・ギャラリー用プラグイン シンプルな画像スライダー/ギャラリー用プラグイン ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」