Question

如何在一行中添加两个轮播滑块？是否可以在一行中添加两个滑块？就像我想要这样做在左侧的白色部分，我想添加另一个旋转木马，问题是这个滑块添加到第一个滑块的底部，所以我想添加非常nex到它任何解决方案请。

<div class="container-fluid" >
    <div class="row">
        <!-- Carousel -->
      <div id="position-setter">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators" id="abc">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/first.jpg" alt="First slide" >
                      <!-- Static Header -->
                      <div class="header-text hidden-xs">
                          <div class="col-md-12 text-center">
                              <h2>
                                <span>Welcome to <strong>Ali Institute of Education</strong></span>
                              </h2>
                              <br>
                              <h3>
                                <span>Apply for Admission.</span>
                              </h3>
                              <br>
                              <div class="text-center">
                                    <span class="glyphicon glyphicon-chevron-right"></span>  <a class="btn btn-theme btn-sm btn-min-block" href="#">Apply</a> <span class="glyphicon glyphicon-chevron-left"></span></div>
                          </div>
                      </div><!-- /header-text -->
                </div>
                <div class="item">
                    <img src="img/second.jpg" alt="Second slide">
                    <!-- Static Header -->

                </div>
                <div class="item">
                    <img src="img/Third.jpg" alt="Third slide">
                    <!-- Static Header -->

                      <!-- /header-text -->
                </div>
            <div class="item">
                    <img src="img/Forth.jpg" alt="Third slide">
                    <!-- Static Header -->

                      <!-- /header-text -->
                </div>


            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div><!-- /carousel -->

    </div>



    </div>
    </div>



  </div>

Answer 1

我假设您使用Twitter-Bootstrap从您的代码段开始。
这是可能的，但你需要一个包装器。首先，设置第一个滑块必须填充的列数。

<div class="container-fluid" >
    <div class="row">
        <!-- Columns -->
        <div class="col-xs-8">
            <!-- Carousel -->
            <div id="position-setter">
            ...

然后，为其他两个旋转木马制作一个包装，并将其尺寸设置为12 - 您的第一个旋转木马填充的列数。

<div class="container-fluid" >
    <div class="row">
        <!-- Columns -->
        <div class="col-xs-8">
            <!-- Carousel -->
         </div>
         <!-- Wrapper -->
         <div class="col-xs-4">
             <!-- The other two carousels -->
             <div class="row">
                 <div class="col-xs-12">
                     <!-- Second carousel -->
                 </div>
                 <div class="col-xs-12">
                     <!-- Third carousel -->
                 </div>
             </div>
         </div>
     </div>
</div>

然后，将第二个和第三个旋转木马高度设置为第一个旋转木马的一半（或者你需要的任何比例），你没问题

Web开发滑块问题

1 个答案: