带有弹出视频链接的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">