Bootstrap 4 Grid with Modals and Carousels

时间：2018-04-23 19:37:19

标签： javascript css twitter-bootstrap bootstrap-4 carousel

我正在使用BS4.1.0并创建了一个网格，我正在尝试让图像为每个网格图像设置一个旋转木马。只有第一个带有B-1的网格正在工作。当您单击网格中的图像时，应弹出一个模态，并且模态应该是一个轮播。

这是我的代码，任何人都可以帮助弄清楚我错过了什么。 

<div class="container">
<div class="row mb-2 text-center">

<div class="col-sm-6 col-lg-3 mb-2">
<div class="col-md-12 text-center">
 <img class="img-fluid" data-toggle="modal" data-target="#B-1" alt="B-1" src="http://nationalkitchencabinets.com/images/B-1.jpg">
<button type="button" class="btn btn-info">Door Style B-1</button>
<!-- The modal -->
<div class="modal fade" id="B-1" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item active">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-1.jpg" alt="slide 1">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-2.jpg" alt="slide 2">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-3.jpg" alt="slide 3">
            
</div>
 
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-4.jpg" alt="slide 4">
            
</div>
 
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1L.jpg" alt="slide 5">
            
</div>
 </div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>

</div>
  <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
         </div>
</div></div></div></div></div>

<div class="col-sm-6 col-lg-3 mb-2">
<div class="col-md-12 text-center">
 <img class="img-fluid" data-toggle="modal" data-target="#B-2" alt="B-2" src="http://nationalkitchencabinets.com/images/B-2.jpg">
<button type="button" class="btn btn-info">Door Style B-2</button>
<!-- The modal -->
<div class="modal fade" id="B-2" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall2" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item active">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-1.jpg" alt="slide 1">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-2.jpg" alt="slide 2">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-3.jpg" alt="slide 3">
            
</div>
 
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-4.jpg" alt="slide 4">
            
</div>
</div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>

</div>
  <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
         </div>
</div></div></div></div></div>

<div class="col-sm-6 col-lg-3 mb-2">
<div class="col-md-12 text-center">
 <img class="img-fluid" data-toggle="modal" data-target="#B-3" alt="B-3" src="http://nationalkitchencabinets.com/images/B-3.jpg">
<button type="button" class="btn btn-info">Door Style B-3</button>
<!-- The modal -->
<div class="modal fade" id="B-3" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall3" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExample3" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item active">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-1.jpg" alt="slide 1">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-2.jpg" alt="slide 2">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-3.jpg" alt="slide 3">
            
</div>
 
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-4.jpg" alt="slide 4">
            
</div>
 
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-5.jpg" alt="slide 5">
            
</div>
 </div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>

</div>
  <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
         </div>
</div></div></div></div></div>

<div class="col-sm-6 col-lg-3 mb-2">
<div class="col-md-12 text-center">
 <img class="img-fluid" data-toggle="modal" data-target="#B-4" alt="B-4" src="http://nationalkitchencabinets.com/images/B-4.jpg">
<button type="button" class="btn btn-info">Door Style B-4</button>
<!-- The modal -->
<div class="modal fade" id="B-4" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall4" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExample4" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item active">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-4-1.jpg" alt="slide 1">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-4-2.jpg" alt="slide 2">
            
</div>
            
<div class="carousel-item">
                
<img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-4-3.jpg" alt="slide 3">
            
</div>
</div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>

</div>
  <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
         </div>
</div></div></div></div></div>
</div></div>

这是所有https://codepen.io/mlegg10/pen/ZoQRME/

的代码

2 个答案:

答案 0 :(得分：1)

每个模态中的旋转木马控件均以第一个旋转木马为目标，因此箭头无法推进幻灯片。更新轮播控件中的href ...

href="#carouselExample2"，href="#carouselExample3"等......

演示：https://www.codeply.com/go/DqZgX4W1wW 

<a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
   <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
 </a>

答案 1 :(得分：0)

正如@ZimSystem所说。

  

按钮href和模态id共享完全相同的名称。

＆＃13;
＆＃13; 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row mb-2 text-center">

    <div class="col-sm-6 col-lg-3 mb-2">
      <div class="col-md-12 text-center">
        <img class="img-fluid" data-toggle="modal" data-target="#B-1" alt="B-1" src="http://nationalkitchencabinets.com/images/B-1.jpg">
        <button type="button" class="btn btn-info">Door Style B-1</button>
        <!-- The modal -->
        <div class="modal fade" id="B-1" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
              </div>
              <div class="modal-body">
                <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">

                  <div class="carousel-inner row w-100 mx-auto" role="listbox">

                    <div class="carousel-item active">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-1.jpg" alt="slide 1">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-2.jpg" alt="slide 2">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-3.jpg" alt="slide 3">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-4.jpg" alt="slide 4">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1L.jpg" alt="slide 5">

                    </div>
                  </div>

                  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>

                    <span class="sr-only">Previous</span>
                  </a>

                  <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>

                    <span class="sr-only">Next</span>
                  </a>

                </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-2">
      <div class="col-md-12 text-center">
        <img class="img-fluid" data-toggle="modal" data-target="#B-2" alt="B-2" src="http://nationalkitchencabinets.com/images/B-2.jpg">
        <button type="button" class="btn btn-info">Door Style B-2</button>
        <!-- The modal -->
        <div class="modal fade" id="B-2" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall2" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
              </div>
              <div class="modal-body">
                <div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="2000">

                  <div class="carousel-inner row w-100 mx-auto" role="listbox">

                    <div class="carousel-item active">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-1.jpg" alt="slide 1">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-2.jpg" alt="slide 2">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-3.jpg" alt="slide 3">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-2-4.jpg" alt="slide 4">

                    </div>
                  </div>

                  <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>

                    <span class="sr-only">Previous</span>
                  </a>

                  <a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>

                    <span class="sr-only">Next</span>
                  </a>

                </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-2">
      <div class="col-md-12 text-center">
        <img class="img-fluid" data-toggle="modal" data-target="#B-3" alt="B-3" src="http://nationalkitchencabinets.com/images/B-3.jpg">
        <button type="button" class="btn btn-info">Door Style B-3</button>
        <!-- The modal -->
        <div class="modal fade" id="B-3" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall3" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
              </div>
              <div class="modal-body">
                <div id="carouselExample3" class="carousel slide" data-ride="carousel" data-interval="2000">

                  <div class="carousel-inner row w-100 mx-auto" role="listbox">

                    <div class="carousel-item active">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-1.jpg" alt="slide 1">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-2.jpg" alt="slide 2">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-3.jpg" alt="slide 3">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-4.jpg" alt="slide 4">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-3-5.jpg" alt="slide 5">

                    </div>
                  </div>

                  <a class="carousel-control-prev" href="#carouselExample3" role="button" data-slide="prev">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>

                    <span class="sr-only">Previous</span>
                  </a>

                  <a class="carousel-control-next text-faded" href="#carouselExample3" role="button" data-slide="next">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>

                    <span class="sr-only">Next</span>
                  </a>

                </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-2">
      <div class="col-md-12 text-center">
        <img class="img-fluid" data-toggle="modal" data-target="#B-4" alt="B-4" src="http://nationalkitchencabinets.com/images/B-4.jpg">
        <button type="button" class="btn btn-info">Door Style B-4</button>
        <!-- The modal -->
        <div class="modal fade" id="B-4" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall4" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
              </div>
              <div class="modal-body">
                <div id="carouselExample4" class="carousel slide" data-ride="carousel" data-interval="2000">

                  <div class="carousel-inner row w-100 mx-auto" role="listbox">

                    <div class="carousel-item active">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-4-1.jpg" alt="slide 1">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-4-2.jpg" alt="slide 2">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-4-3.jpg" alt="slide 3">

                    </div>
                  </div>

                  <a class="carousel-control-prev" href="#carouselExample4" role="button" data-slide="prev">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>

                    <span class="sr-only">Previous</span>
                  </a>

                  <a class="carousel-control-next text-faded" href="#carouselExample4" role="button" data-slide="next">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>

                    <span class="sr-only">Next</span>
                  </a>

                </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题