スライダーに背景画像を付けて、その両サイドをぼかす(モザイクをかける)方法

サンプル

横幅の短い画像をスライダーに使うと画面幅によっては両サイドに大きな余白ができてしまうので、その対策などに。

サンプルのように風景写真だと結構オシャレな感じになる。

スライダーにはslickを使用。以下の記事も参照のこと。

slickスライダーで画像が左に寄るときはmarginで中央寄せにできる
 slickスライダーの前後ボタンが表示されない原因と対策

ソースコード

スライダーの高さを可変にしたせいで背景画像(= ぼけた画像)の高さの確保が困難になり、1枚のスライドを作るために同じ画像を2回(= ぼけていない画像を2回)使っている(1枚は非表示だけど存在はしている)点が美しくないのがデメリット。

他の方法は思いつかなかった。

スライダーの高さが画面幅に関わらず固定なら「手前の画像」と「背景の画像(= ぼけた画像)」の各1枚で普通にいけると思う。

HTML

CSS


.slider {
    width: 100%; /* スライダーの幅 = 背景画像(= ぼけた画像)の幅 */

    margin-top: 100px;
}

.slider .slider-item {
    width: 100%;
    position: relative; /* ぼけていない画像を中央に持ってくるため */
}

.slider .slider-item .slider-item-bg-wrap {
    overflow: hidden; /* 手前の画像の下に隙間ができるのを防ぐ */
}

.slider .slider-item .slider-item-bg-wrap .slider-item-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    filter: blur(10px);
}

.slider .slider-item .slider-item-bg-wrap .slider-item-bg-image-01 {
    background-image: url('285_slider-image-01.jpg');
}

.slider .slider-item .slider-item-bg-wrap .slider-item-bg-image-02 {
    background-image: url('285_slider-image-02.jpg');
}

.slider .slider-item .slider-item-bg-wrap .slider-item-bg-image-03 {
    background-image: url('285_slider-image-03.jpg');
}

.slider .slider-item .slider-item-inner {
    /* slickを導入するとimgに"display:block;"が付くので、text-alignではimgを中央寄せにできない */
    /*text-align: center;*/

    /* 画像を中央に持ってくる */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.slider .slider-item .slider-image {
    max-height: 500px; /* スライダーの高さ */

    /* slickを導入するとimgに"display:block;"が付くので、imgの中央寄せに必要 */
    margin: 0 auto;
}

.slider .slider-item .slider-image-dummy {
     /* 背景(= ぼけた画像)の高さを確保するため */
    visibility:hidden;
}



/*
    スライダーの設定
*/
.slider .slick-prev
{
    /* デフォルトでは-25px(= スライダーの外側) */
    left: 10px;
}
.slider .slick-next
{
    /* デフォルトでは-25px(= スライダーの外側) */
    right: 10px;
}

.slider .slick-prev,
.slider .slick-next
{
    /* スライド画像の後ろに隠れないようにする */
    z-index: 100;
}

.slider .slick-prev::before,
.slider .slick-next::before {
    /* フォントと色の設定はbefore内で行う */
    /* font-size: 28px; */
    /* color: black; */
}

CSS(レスポンシブ)


@media(max-width: 750px) {
    .slider .slider-item .slider-item-bg-wrap {
        display: none; /* 背景画像(= ぼけた画像)を消す */
    }

    .slider .slider-item .slider-item-inner {
        /* 背景画像で高さを確保していたので、↑で背景画像を消した後は
           ablsoluteを解除しないと高さが消えて表示されなくなる。 */
        position: static;
    }

    .slider .slider-item .slider-image {
        max-width: 100%;
    }
}

jQuery


$(function(){
    $('.slider').slick({
        autoplay:true,
        autoplaySpeed:5000,
        dots:true,
    });
});

ソースコード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル