jQuery PR

bxsliderで余計な余白や白枠を消す方法

記事内に商品プロモーションを含む場合があります

jQueryで動くプラグイン「bxslider」を使用したとき、なぜか勝手に画像の周りに白枠やマージンが追加されます。
あれ消すのめんどくさいですよね(
毎回自分でCSSでを打ち消すのは面倒なので、ここでメモしておこうと思います。

bxsliderで余計な余白や白枠を消す方法

では早速白枠やマージンを削除してシンプルな状態にしていきます。

/* 枠線の削除 */
.bx-wrapper {
    background-color: transparent;
    margin: 0px auto;
    border: none;
    box-shadow: none;
}
.bx-wrapper img {
    display: block;
    margin: 0px auto;
}

bxsliderスワイプのバグが残っているうえに、アップデートされていないので最近は使っていませんが・・・
たまに使う時に面倒なのでメモしておきました。

最近だとslickとかswiperを使用したほうがよいかもしれません。
いろいろスライダーもありますが、試してみてください。

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。