スライドショーを実装してくれる「bxSlider」をご紹介します。
これまでにもスライドショーを実装できる色々なプラグインをご紹介しましたが、
最近はこれをよく使います。

bxSlider

まずはjQueryを読み込む。

<script src="./jquery-1.9.1.min.js"></script>

※ちなみに、jQueryが3.1.1だとエラーが発生しました。

続いてbxSliderのファイルを読み込みます。

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

スライドさせたい内容を用意します。

<ul class="bxslider">

    <li>
        <img src="./images/exam_picture1.jpg">
    </li>

    <li>
        <img src="./images/exam_picture2.jpg">
    </li>

    <li>
        <img src="./images/exam_picture3.jpg">
    </li>

</ul>

まずは簡単に実装してみましょう。

<script type="text/javascript">
<!--//
(function($) {
    $(document).ready(function(){

        $('.bxslider').bxSlider({
            auto: true,
            autoHover: true,
        });

    });
})(jQuery);
//-->
</script>

ここで指定したオプション

色や余白、セレクター等を変更したかったので、サイトを参考にしながらカスタマイズしてみました。

HTMLを少し追加します。

<ul class="bxslider">

    <li>
        <img src="./images/exam_picture1.jpg">
    </li>

    <li>
        <img src="./images/exam_picture2.jpg">
    </li>

    <li>
        <img src="./images/exam_picture3.jpg">
    </li>

</ul>
<p class="slider-control"><span class="slider-prev"></span><span class="slider-next"></span><div class="float_clear"></div></p>

セレクターを任意のものにするため、タグとクラス、中のテキストをオプションで指定します。

<script type="text/javascript">
<!--//
(function($) {
    $(document).ready(function(){

        $('.bxslider').bxSlider({
            auto: false,
            nextSelector: 'span.slider-next',
            prevSelector: 'span.slider-prev',
            nextText: '&raquo;',
            prevText: '&laquo;',
        });

    });
})(jQuery);
//-->
</script>

ここで指定したオプション

デザインを変更するためにCSSを上書きします。
クラス名についてはjquery.bxslider.cssを紐解くか参考サイトをご覧ください。

基本的には.bx-wrapperが.bx-viewport、.bx-prev、bx-next、bx-pagerなどを包括していると考えて良さそうです。

まずは全体のCSSを設定。

.bx-wrapper {
    width: 100%;
    margin: 0 auto;
}

ちなみにここで指定しているCSSにはデフォルトの設定を上書きで無効にするために指定しているだけのものもあります。

実際に画像が表示される.bx-viewportのCSSを設定。
left: 0を指定しているのは画像がずれて表示されるためです。
デフォルトで表示される影や背景を削除します。

.bx-wrapper .bx-viewport {
    left: 0;
    box-shadow: none;
    background: none;
    margin: 0;
    padding: 0;
    border: 0;
}

デフォルトのページ送りが表示されないようにします。

.bx-wrapper .bx-prev {
    height: auto;
    left: -15px;
    background: none;
}

.bx-wrapper .bx-next {
    height: auto;
    right: -15px;
    background: none;
}

セレクターに関する設定を行います。
特にこちらは任意で好きなようにしてください。

p.slider-control {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    border: 1px solid #333;
    top: 0;
    left: 0;
    z-index: 9999;
}
p.slider-control span {
    margin: 0;
    padding: 0;
    display: inline-block;
}
span.slider-prev {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: left;
}
span.slider-next {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: right;
    text-align: right;
}
span.slider-prev a, span.slider-next a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 0 10px;
}
p.slider-control span a:hover {
    color: #f0f5ff;
}

カルーセルのドットカラーを変える

.bx-wrapper .bx-pager {
    color: #fff;
    margin: 0;
    padding: 10px;
    position: relative;
    bottom: 0;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #ffffff;
}

/* マウスオーバー */
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #ffff00;
}

カスタマイズの際、参考にさせていただいたサイト
http://yane-ni-kabochano.com/blog/?p=7