bxsliderで画像ごとにリンクをつけるとレイアウトが崩れる

Question

現在GitHub Pages上でJekyllのデフォルトテンプレートを使用しながらウェブサイトを制作していてbxsliderを使って画像ごとにリンクをつけたいのですが、<a href=""></a>を使うとリンクは作動するのですが１枚目のレイアウトが崩れてコードがページ上に表示されてしまい、２枚目以降は左に寄って右側に隙間ができてしまいます。<a href=""></a>を外すと綺麗に作動しているのですが、次はキャプションが表示されなくなります。。

キャプションは最悪なくてもいいのですが、リンクとスライドショーはうまく動作させたく色々検索して試してみたのですがうまくいきませんでした。
特にbxsliderに拘っているわけではないのでもし簡単なものがあってそちらの方が良いようでしたら別のものでも教えていただけるとありがたいです。

該当コード

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<script type="text/javascript">
        $(document).ready(function(){
            $('.slider').bxSlider({
                auto: true,
                pause: 5000,
                captions: true,
                touchEnabled: false
            });
        });
</script>

<div class="slider">
<img src="xxxx.jpeg" width="600" height="500" alt="Tsunoshima Ohashi (Yamaguchi)" title="Tsunoshima Ohashi (Yamaguchi)">
<img src="xxxx.jpeg" width="600" height="500" alt="Itsukushima Jinja (Hiroshima)" title="Itsukushima Jinja (Hiroshima)">
<img src="xxxx.jpeg" width="600" height="500" alt="Kanmon Kaikyo (Yamaguchi/Fukuoka)" title="Kanmon Kaikyo (Yamaguchi/Fukuoka)">
<img src="xxxx.jpeg" width="600" height="500" alt="Motonosumi Inari Jinja (Yamaguchi)" title="Motonosumi Inari Jinja (Yamaguchi)">
</div>

試したこと

<ul class="slide">と<li>を組み合わせたりしたが変わらなかった。

Answer 1

<ul class="slide">と<li>を組み合わせたりしたが変わらなかった。

ドキュメント全文を読み、ソースも追いかけてみてください。

Step 2: Create HTML markup には ul>li で、プラグイン用のツリーを書くように指示されています。liの中にスライドするコンテンツを書くようです。

Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!

原文は中学英語の文法【命令文】ですが、Google翻訳すると「〜できます」と、ニュアンスが変わっちゃいますね。

ちなみに、gitHubの /src/css/jquery.bxslider.css（23行） にはul.bxsliderというセレクタもありますので、ul>li でマークアップしたほうが良さそうに思います。

Comments

[agg1234]

うまくいきました！なぜか左に別の画像が少し写ってしまっていますが…。。ありがとうございました！

Answer 2

下記のCSSを追加すればどうでしょうか。

.slider img {
  width: 100%;
}

CodePenサンプル

Comments

[agg1234]

ありがとうございます！`<ul>`>`<li>`でやったらうまくいったのですが、次はカルーセルにしていないにもかかわらず左端に別の画像が映り込んでしまっていて、widthを調節したりhatena19さんのCSSなども試したのですがなかなかうまくいかず…