Web development slider issue

Question

How can i add two carousel slider in a single row? Is it possible to add two sliders in a single row? like i want to do this the white section on the left side i want to add another carousel the issue is this slider add to the bottom of first slider so i want add very nex to it any solution please.

<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

I'm assuming from your snippet that you are using Twitter-Bootstrap.
It is possible, but you will need a wrapper. First of all, set the number of columns your first slider has to fill.

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

Then, make a wrapper for the other two carousels, and set its dimension to 12 - the number of columns your first carousel fills.

<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>

Then, set the second and third carousels height to half of the first carousel (or whatever ratio you need) and you are ok