ポップアップビデオへのリンク付きCSSスライダー

Question

私はCSSスライダーでポップアップビデオへのリンクを作成しようとしています。私は仕事へのリンクを得ることができません。それは単純なタスクのように思えるが、リンクとして機能していない。ここに私のコードは

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div style="width:100%; class="container-fluid"> 
 
     
 
     <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> 
 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
 
     <li data-target="#myCarousel" data-slide-to="5"></li> 
 

 
    </ol> 
 
    
 
    <!-- Wrapper for slides --> 
 
    <ul class="carousel-inner"> 
 
    <li class="item active"> 
 
    <a href="https://www.youtube.com/embed/yiif8r_U120" target="blank" 
 
    allowfullscreen controls> 
 
     <img src="images/video_slider_button.jpg" alt="Video" style="width:100%;"> 
 
    </a> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="images/test_slider.jpg" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="images/test_slider.jpg" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="images/toast_slider.jpg" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="images/test_slider.jpg" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="images/test_slider.jpg" alt="Test" style="width:100%;"> 
 
    </li> 
 
    </ul> 
 

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

Answer 1

であるあなたの問題は、非閉じタグの問題であるように思わ本当に

をいただければ幸いです何かアドバイスは、ここにいくつかの作業コードです：

<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.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div style="width:100%;" class="container-fluid"> 
 
     
 
     <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> 
 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
 
     <li data-target="#myCarousel" data-slide-to="5"></li> 
 

 
    </ol> 
 
    
 
    <!-- Wrapper for slides --> 
 
    <ul class="carousel-inner"> 
 
    <li class="item active"> 
 
    <a href="https://www.youtube.com/embed/yiif8r_U120" target="blank" 
 
    allowfullscreen controls> 
 
     <img src="http://via.placeholder.com/350x150?text=Video Slide" alt="Video" style="width:100%;"> 
 
    </a> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="http://via.placeholder.com/350x150?text=Slide1" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="http://via.placeholder.com/350x150?text=Slide2" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="http://via.placeholder.com/350x150?text=Slide3" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="http://via.placeholder.com/350x150?text=Slide4" alt="Test" style="width:100%;"> 
 
    </li> 
 
    <li class="item"> 
 
     <img src="http://via.placeholder.com/350x150?text=Slide5" alt="Test" style="width:100%;"> 
 
    </li> 
 
    </ul> 
 

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

私が見た

問題は、あなたが、あなたのdivコンテナの見積もりを閉鎖したことがないということであった。例：

<div style="width:100%; class="container-fluid">
はされている必要があります：
<div style="width:100%;" class="container-fluid">