ブートストラップカルーセル - キャプション付きリンクイメージ

Question

これは私の最初のカルーセルプロジェクトで、イメージにハイパーリンクを追加する適切な方法についての質問があります。ここで（w3school's exampleを使用して）私の項目の形式は次のとおりです。画像の唯一の上部と下部がアクティブになるようにキャプションのdivは、デッドスポットが発生したため、私は、画像とリンクさキャプションの両方を持っている

<div class="item"><a href="videos/Reports.mp4" target="_blank"> 
    <img src="graphics/reportsCarousel.png" /></a> 
     <a href="videos/Reports.mp4" target="_blank"><div class="carousel-caption"> 
      <p>Reports</p> 
     </div></a> 
    </div> 

お知らせ、すなわち、クリック可能。キャプションをイメージに入れてみましたが、結果が気に入らなかった。キャプションを画像の上と下に移動しようとしましたが、キャプションは表示されませんでした。私はこのように見えるのが本当に好きですが、リンクを設定するより良い方法があるのだろうかと思います。

エクストラクレジット：二、三の画像が現在のdivの設定を使用して並べて表示持つ方法がある場合にも、私が疑問に思いますか？ 2番目のイメージを項目divに入れると、インラインulを使っても、イメージは水平方向ではなく垂直方向に表示されます。私はもっ​​と複雑な方法を使ってそれを行うことができますが、もし私が簡単にこれを微調整することができれば、それは私に多くの時間を節約するでしょう。

Answer 1

私は今日いくつかの時間を過ごしました。それは動作するようです。

[mcve]が不足しているため、あなたの問題を再現できないため、あなたの問題に対処しているかどうかはわかりません。

は私がコンソールにクリックイベントをログに記録するJSを追加しました - あなたがまたは（再び私はあなたが提供されているコードは/完全な検証ではありませんので、必要なものがわからないよ）あなたの最終版でそれを必要としない場合があり

あなたはリンクの動作を確認するために、独自のページへ/ペーストをコピーする必要があります（下の実行可能なスニペットは、フレームの内側にあるとx-frame-optionsがSAMEORIGINに設定されているので、リンクは実際にはここで働いていないということ

に注意してください。 ）

$(function() { 
 
    $('.item').on('click', function() { 
 
    console.log('clicked! going to: ' + $(this).find('a').attr('href')); 
 

 
    window.location = $(this).find('a').attr('href'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <a href="http://google.com" target="_blank"> 
 
     <img src="http://lorempixel.com/1024/480/" /> 
 
     <div class="carousel-caption"> 
 
      <h3>caption 1</h3> 
 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="item"> 
 
     <a href="http://google.com" target="_blank"> 
 
     <img src="http://lorempixel.com/1024/480/" /> 
 
     <div class="carousel-caption"> 
 
      <h3>caption 2</h3> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="item"> 
 
     <a href="http://google.com" target="_blank"> 
 
     <img src="http://lorempixel.com/1024/480/" /> 
 
     <div class="carousel-caption"> 
 
      <h3>caption 3</h3> 
 

 
     </div> 
 
     </a> 
 

 
    </div> 
 

 
    <div class="item"> 
 
     <a href="http://google.com" target="_blank"> 
 
     <img src="http://lorempixel.com/1024/480/" /> 
 
     <div class="carousel-caption"> 
 
      <h3>caption 4</h3> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>