Two bootstrap carousel sliders with different widths

1
votes

So here is my problem, I have two carousel sliders and the width of both are different.And I need to fix them so both width are similar. I couldn't figure out how to change the size of Carousel 2 to match the first carousel. Both slider are a little different. The images inside carousel 2 will get larger but I just need the width of both carousel match.

you can see my page here. http://modernstudiotest.jbglobal.net/slider_menu2.html

Here is my Html

.carousel-control.left,
.carousel-control.right {
  background-image: none
}
.carousel {
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */

.carousel-control {
  left: -12px;
}
.carousel-control.right {
  right: -12px;
}
/* Changes the position of the indicators */

.carousel-indicators {
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */

.carousel-indicators li {
  background: #c0c0c0;
}
.carousel-indicators .active {
  background: #000000;
}
.well {
  background: #ffffff;
  border-style: none;
}
.thumbnail {
  border-style: none;
}
.col-mid-12 {
  border-style: none;
}
.carousel-control {
  position: absolute;
  top: 40%;
  /* pushes the icon in the middle of the height */
  z-index: 5;
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Modern Studio Equipment &#8211; The leader in grip and rigging equipment, made in North Hollywood, CA USA</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/ms_style.css" rel="stylesheet" type="text/css">

</head>

<body>

  <!-- /.Carousel 1 -->

  <div id="carousel1" class="carousel slide" data-ride="carousel">



    <div class="carousel-inner">
      <div class="item active">
        <img src="images/modernmondays.jpg" alt="first slide image">
      </div>

      <div class="item">
        <img src="images/slider1.jpg" alt="Second slide image">
      </div>

      <div class="item">
        <img src="images/slider2.jpg" alt="Third slide image">
      </div>

      <div class="item">
        <img src="images/slider3.jpg" alt="Second slide image">
      </div>

      <div class="item">
        <img src="images/slider4.jpg" alt="Second slide image">
      </div>

      <div class="item">
        <img src="images/slider5.jpg" alt="Second slide image">
      </div>


      <a class="carousel-control left" href="#carousel1" data-slide="prev">
        <span class="icon-prev"></span>

        <a class="carousel-control right" href="#carousel1" data-slide="next">
          <span class="icon-next"></span>
        </a>
      </a>

      <ol class="carousel-indicators">
        <li data-target="#carousel1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel1" data-slide-to="1"></li>
        <li data-target="#carousel1" data-slide-to="2"></li>
        <li data-target="#carousel1" data-slide-to="3"></li>
        <li data-target="#carousel1" data-slide-to="4"></li>
        <li data-target="#carousel1" data-slide-to="5"></li>
      </ol>


    </div>

  </div>




  <!-- /.Carousel 2 -->
  <div class="container">
    <div class="row">
      <div class="col-md-20">
        <div class="well" style="position: relative">
          <div id="myCarousel" class="carousel slide" data-interval="false">



            <!-- Carousel items -->
            <div class="carousel-inner">

              <div class="item active">
                <div class="row-fluid">
                  <div class="col-xs-2 col-xs-offset-1">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_1a.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_1b.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_1c.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_1d.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_1e.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                </div>
                <!--/row-fluid-->
              </div>
              <!--/item-->

              <div class="item">
                <div class="row-fluid">
                  <div class="col-xs-2 col-xs-offset-1">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_2a.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_2b.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_2c.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_2d.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_2e.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                </div>
                <!--/row-fluid-->
              </div>
              <!--/item-->

              <div class="item">
                <div class="row-fluid">
                  <div class="col-xs-2 col-xs-offset-1">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_3a.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_3b.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_3c.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_3d.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                  <div class="col-xs-2">
                    <a href="#x" class="thumbnail">
                      <img src="images/middle_slider_3e.jpg" alt="Image" style="max-width:125%;" />
                    </a>
                  </div>
                </div>
                <!--/row-fluid-->
              </div>
              <!--/item-->

            </div>
            <!--/carousel-inner-->

            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
              <span>
                 <img src="images/ms_Lft_arrow.png" />
                </span>

              <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span>
                 <img src="images/ms_rt_arrow.png" />
                </span>
              </a>
            </a>
          </div>
          <!--/myCarousel-->

        </div>
        <!--/well-->
      </div>
    </div>
  </div>



  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="js/jquery-1.11.3.min.js"></script>

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.js"></script>
</body>

</html>
1
htmlcsstwitter-bootstrapcarousel
Just something to keep in mind is that regardless of the max-width that you make the carousels, you should still try to keep them responsive to follow good web design standards. Erdems solution seems like it would work. The sizing of the images should also be skewed for proper viewing on mobile devices. If you still need help, you can message me on my website www.rocketrisa.com :) - Rocket Risa

1 Answers

0
votes

Because container class resize to carousel width;

You can solve this;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Studio Equipment &#8211; The leader in grip and rigging equipment, made in North Hollywood, CA USA</title>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ms_style.css" rel="stylesheet" type="text/css">

</head>

<body >

<!-- /.Carousel 1 --> 

<div id="carousel1" class="carousel slide" data-ride="carousel">



  <div class="carousel-inner">
      <div class="item active">
        <img src="images/modernmondays.jpg" alt="first slide image">
      </div>

      <div class="item">
        <img src="images/slider1.jpg" alt="Second slide image">
      </div>

      <div class="item">
         <img src="images/slider2.jpg" alt="Third slide image">
      </div>

      <div class="item">
         <img src="images/slider3.jpg" alt="Second slide image">
      </div>

      <div class="item">
         <img src="images/slider4.jpg" alt="Second slide image">
      </div>

      <div class="item">
        <img src="images/slider5.jpg" alt="Second slide image">
      </div>


    <a class="carousel-control left" href="#carousel1" data-slide="prev">
      <span class="icon-prev"></span>

    <a class="carousel-control right" href="#carousel1" data-slide="next">
    <span class="icon-next"></span>
    </a></a>

      <ol class="carousel-indicators">
        <li data-target="#carousel1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel1" data-slide-to="1"></li>
        <li data-target="#carousel1" data-slide-to="2"></li>
        <li data-target="#carousel1" data-slide-to="3"></li>
        <li data-target="#carousel1" data-slide-to="4"></li>
        <li data-target="#carousel1" data-slide-to="5"></li>
      </ol>


  </div>

</div>




  <!-- /.Carousel 2 --> 
  <div class="container">
    <div class="row">
        <div class="col-md-20">
            <div class="well" style="position: relative"> 
                  BLA BLA CONTENT

            </div><!--/well-->   
        </div>
    </div>
</div>


<div id="myCarousel" class="carousel slide" data-interval="false">



                <!-- Carousel items -->
                <div class="carousel-inner">

                <div class="item active">
                    <div class="row-fluid">
                      <div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="images/middle_slider_1a.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1b.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1c.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1d.jpg" alt="Image" style="max-width:125%;" /></a></div>
                       <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1e.jpg" alt="Image" style="max-width:125%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                <div class="item">
                    <div class="row-fluid">
                        <div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="images/middle_slider_2a.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2b.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2c.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2d.jpg" alt="Image" style="max-width:125%;" /></a></div>
                       <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2e.jpg" alt="Image" style="max-width:125%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                <div class="item">
                    <div class="row-fluid">
                        <div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="images/middle_slider_3a.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3b.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3c.jpg" alt="Image" style="max-width:125%;" /></a></div>
                      <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3d.jpg" alt="Image" style="max-width:125%;" /></a></div>
                       <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3e.jpg" alt="Image" style="max-width:125%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                </div><!--/carousel-inner-->

                <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span>
             <img src="images/ms_Lft_arrow.png" />
            </span>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span>
             <img src="images/ms_rt_arrow.png" />
            </span>
  </a></a>
                </div><!--/myCarousel-->



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.3.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.js"></script>
</body>
</html>