bxsliderで画像に隙間が生まれてしまいます

bxsliderを初めて使ったのですが、画像の上下左右にわずかな隙間(変なマージン)が生まれてレイアウトが崩れてしまいます。
オプションを何もつけていなかった、初期状態でそんな感じでした。
下記のコードで、メインビジュアル（.bxslider）に対してsliderを適用してfadeでスライドすることを目的としています。
動きは調整できましたが、見た目が崩れています。

これはオプションで設定できるのでしょうか。それともCSSなどで.bxsliderに対してスタイルを適用するのでしょうか。

結構急ぎの状態なので、勉強不足で恐縮ですが教えていただけると幸いです。
よろしくお願いします。

<script>
$(document).ready(function(){
    $('.bxslider').bxSlider({
		mode: 'fade',
        auto: true,
		controls: false,
		speed:4000,
		startSlide: 1,
		pager: false,

    });
});
</script>
</head>
	
<body>	
	
<header>
	<ul class="bxslider">
		<li class="hero-image1">
			<img src="image/メインビジュアル1.jpeg" alt="メインビジュアル1">
		</li>
		<li class="hero-image2">
			<img src="image/メインビジュアル2.jpeg" alt="メインビジュアル2">
		</li>
		<li class="hero-image3">
			<img src="image/メインビジュアル3.jpg" alt="メインビジュアル3">
		</li>
	</ul>
コード

yuki84web

2020/06/14 03:09

画像の上で右クリック→要素の検証から開発者ツールを表示し、レイアウト（CSSのスタイル）を視覚的に見られるツールで、どの要素にpaddingやｍarginが適用されているのかを調べてみると解決が早いと思います。

退会済みユーザー

2020/06/14 12:38

.bx-wrapper { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; background: #fff; どうやらborder:5pxが原因のようです。しかし、スタイルでborder:noneとしても打ち消せません。どうしたら良いでしょうか。

yuki84web

2020/06/15 03:58

.bx-wrapper {border:none !important;}でも無理ですか？当然ですが、bxsliderのcssを読み込んだ後に適用する必要があります。

退会済みユーザー

2020/06/16 01:24

.bx-wrapper {border:none !important;}でようやく打ち消せました。まだまだ勉強不足ですね、、、本当にありがとうございました。