ミギムキ

[CSS] 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; }
スポンサー広告