[CSS] bxSliderの枠線を消したりして見た目をシンプルにしたい

公開日:2018/09/22 更新日:2022/12/13

bxSliderのデフォルトスタイルは、画像に枠がついていたり、いかにもなbxSlider感が否めません
そんな場合はスタイルを上書きして「枠線を消す」「ページャーの位置を変える」「左右ボタンのアイコンを変える」といった修正がオススメです。デフォルトの見た目からちょっと変わった印象になります

サンプルコード

スライダーの枠線を消す

.bx-wrapper {
    background-color: transparent;
    margin: 0px auto;
    border: none;
    box-shadow: none;
}
.bx-wrapper img {
    display: block;
    margin: 0px auto;
}

ページャーをスライダーの内側に収める

.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
    bottom: 20px;
}

スライダーの左右ボタンをFontAwesomeのフォントアイコンにする

.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
    background: none;
}
.bx-wrapper .bx-prev::after,
.bx-wrapper .bx-next::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ddd;
    font-size: 60px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    text-indent: 0px;
}
.bx-wrapper .bx-prev::after {
    left: -90px;
    content: "\f137";
}
.bx-wrapper .bx-next::after {
    right: -90px;
    content: "\f138";
}
.bx-wrapper .bx-prev:hover::after,
.bx-wrapper .bx-next:hover::after {
    color: #bbb;
}
.bx-wrapper .bx-controls-direction a {
    z-index: 9998;
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。