bxsliderの写真が縦並びに表示されてしまい、動かない

Question

前提・実現したいこと

学校の課題でホームページ制作をしています。bxsliderをつくっているのですが、全く動きません。
選択した画像が、縦並びに表示されている状態です。
また、画像のサイズが大きいのか、ホームページの背景の画像が拡大されてしまっています。

bxsliderを正常に動かすにはどうしたらよいですか。

発生している問題・エラーメッセージ

F12を押してみて、現在はエラーを全て解決した状態なのですが、動きません。

該当のソースコード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="jquery.bxslider.min.js"></script> <link href="jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function(){ $('.slider').bxSlider({ mode: "horizontal", maxSlides: 5, minSlides: 3, moveSlides: 5, slideWidth: 100, slideMargin: 2, captions: true, infiniteLoop: true, pager: true, controls: true, auto: true, pause: 2000, speed: 500, responsive:true, touchEnabled:true, }); }); </script>

試したこと

F12を押して出てきたエラーは全て解決しました。（主に書き間違い）

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

.slider のHTMLをご提示ください。

[x_x]

この部分だけでは問題が起こりません。<ul class="slider">のコードを書いてください。
また、背景の画像はコードがまるで書かれていません。別問題ではないのですか？