画面横幅いっぱいに画像を表示するスライダー

サイトのホームによくある、いくつかのコンテンツがスライドして表示する要素（機能）があるかと思います。 jQuery プラグインで言えば、 bxSlider や FlexSlider 2 などがあります。それらは、画面の中央に1つのコンテンツが表示され、他のコンテンツは隠れているサンプルがほとんどなのですが、画面横幅いっぱいにコンテンツを並べ、それをスライド表示できないか、という事例がありました。（ちなみに、レスポンシブ Web デザイン採用で。）

スライダーを自作すると結構時間がかかることが予想されたので、既存のプラグインのオプション変更で対応できないか等探ってみました。しかしながら、該当するものがありませんでしたので、 bxSlider を少し改造して使ってみることにしました。結果、上手く表示できるようになりました。

• 表示サンプル
• カスタマイズ後のコード（ jquery.bxslider.js ）

カスタマイズの要旨

CSS

コンテンツを横幅いっぱい表示させるために、 .bx-viewport の overflow を変更するだけで良いようです。その他、枠線を消したり、メインで表示されている以外（画面の左右に見えているコンテンツ）に半透明の黒を重ねて隠れているようにする、などの軽微な変更です。

.mod-bxslider-demo-01 {
    overflow: hidden;
}

.bx-viewport:before,
.bx-viewport:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.bx-wrapper .bx-viewport {
    overflow: visible !important;
    left: 0;
    border-width: 0;
    box-shadow: none;
}

.bx-viewport:before {
    right: 100%;
    left: -100%;
}

.bx-viewport:after {
    left: 100%;
    right: -100%;
}

JavaScript

一通りコンテンツを表示して最初のコンテンツに戻って表示が完了した際、2つめのコンテンツが「パッ」と突然現れるような感じになることに気付きました。スライダーを逆方向に動かした際も、そのような現象が発生します。そのため、ダミーで追加されるコンテンツの量を増やしました。

 /**
     * Start the slider
     */
    var start = function(){
        // if infinite loop, prepare additional slides
        if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){
            var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
            var last2Count = slider.children.length - 2;
            var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone');
            var sliceAppend2 = slider.children.eq(1).clone().addClass('bx-clone');
            var slicePrepend2 = slider.children.eq(last2Count).clone().addClass('bx-clone');
            var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');
            el.append(sliceAppend).append(sliceAppend2).prepend(slicePrepend).prepend(slicePrepend2);
        }

また、これに合わせ、前後にスライドを動かすメソッド（ goToSlide メソッド）も調整しました。

アクセシビリティ上の懸念

これは元々ある懸念事項でもあるのですが、スライドするコンテンツにリンクが設定されている要素がある場合、キーボード操作をするとダミーで追加されたコンテンツ（コンテンツがきれいに無限ループしているように見せるためにコピーされたコンテンツ）にもフォーカスが当たってしまいます。カスタマイズによりダミーのコンテンツが増えているため、無駄にフォーカスが当たる数も増えています。

また、興味があるコンテンツが表示されてクリックしようとしたのに勝手に次のコンテンツが表示された、などスライダーには色々な懸念事項がありますので、注意したほうが良いでしょう。