CODEWITHSUNDEEP
htmlcssalignmentcarouselresponsive
Leth
Leth

Reputation: 1059

Left align carousel element with thumbnails

I have this carousel element with included clickable thumbnails as shown here: wju.i.imgur.com

As you can see, the carousel element does not perfectly align with the row of thumbnails. Both elements are in a 6-column div. I want the carousel element to extend out to the left, as to align with the thumbnails. I tried changing the width of the carousel and moving the thumbnails around, but this didn't fix my problem.

This is my HTML code for the carousel and the thumbnails:

div class="col-sm-6" id="slider-thumbs">
                        <!-- Bottom switcher of slider -->
                        <div class="col-sm-12" id="slider">
                            <!-- Top part of the slider -->
                            <div class="row">
                                <div class="col-sm-12" id="carousel-bounding-box">
                                    <div class="carousel slide" id="myCarousel">
                                        <!-- Carousel items -->
                                        <div class="carousel-inner">
                                            <div class="active item" data-slide-number="0">
                                                <img src="images/sommerhuse/blokhus/BL-Kokk01.jpg"></div>

                                            <div class="item" data-slide-number="1">
                                                <img src="images/sommerhuse/blokhus/BL-Kokk02.jpg"></div>

                                            <div class="item" data-slide-number="2">
                                                <img src="images/sommerhuse/blokhus/BL-Stue01.jpg"></div>

                                            <div class="item" data-slide-number="3">
                                                <img src="images/sommerhuse/blokhus/Blokhus ude.jpg"></div>
                                        </div>
                                        <!-- Carousel nav -->
                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul class="hide-bullets">

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-0"><img src="images/sommerhuse/blokhus/BL-Kokk01.jpg"></a>
                            </li>

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-1"><img src="images/sommerhuse/blokhus/BL-Kokk02.jpg"></a>
                            </li>

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-2"><img src="images/sommerhuse/blokhus/BL-Stue01.jpg"></a>
                            </li>

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-3"><img src="images/sommerhuse/blokhus/Blokhus ude.jpg"></a>
                            </li>
                        </ul>

                    </div>

The CSS code for the elements:

.carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
     display: block;
     height: 400px !important;
     max-width: 100% !important;
 }
.carousel-inner {
  max-width: 600px !important;
}
    footer h3 {
    color: #000;
    text-align: left;
}

.hide-bullets {
    list-style:none;
    margin-left: -40px;
    margin-top:20px;
}

.thumbnail {
    padding: 0;
}

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    width: 100%;
    height: 300px;
}
.carousel {
     margin-bottom: 10px;
}
.thumbnail > img, .thumbnail a > img {
    margin-right: auto;
    margin-left: auto;
    cursor: pointer; cursor: hand;
}

Upvotes: 0

Views: 415

Answers (1)

Gerard
Gerard

Reputation: 15796

You have the following definition for the carousel:

.carousel-inner {
    max-width: 600px !important;
}

This limits the size of the main image. So you either take this away, or you define a width of 600px for class .hide-bullets which contains the thumbnails.

.hide-bullets {
    list-style: none;
    margin-left: -40px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 600px;
}

I have changed it into a flexbox with spacing equally between the elements for proper horizontal alignment.

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  display: block;
  height: 400px !important;
  max-width: 100% !important;
}

.carousel-inner {
  max-width: 600px !important;
}

footer h3 {
  color: #000;
  text-align: left;
}

.hide-bullets {
  list-style: none;
  margin-left: -40px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 600px;
}

.thumbnail {
  padding: 0;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  width: 100%;
  height: 300px;
}

.carousel {
  margin-bottom: 10px;
}

.thumbnail>img,
.thumbnail a>img {
  margin-right: auto;
  margin-left: auto;
  cursor: pointer;
  cursor: hand;
}
<div class="col-sm-6" id="slider-thumbs">
  <!-- Bottom switcher of slider -->
  <div class="col-sm-12" id="slider">
    <!-- Top part of the slider -->
    <div class="row">
      <div class="col-sm-12" id="carousel-bounding-box">
        <div class="carousel slide" id="myCarousel">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="active item" data-slide-number="0">
              <img src="http://placehold.it/100"></div>

            <div class="item" data-slide-number="1">
              <img src="http://placehold.it/100"></div>

            <div class="item" data-slide-number="2">
              <img src="http://placehold.it/100"></div>

            <div class="item" data-slide-number="3">
              <img src="http://placehold.it/100"></div>
          </div>
          <!-- Carousel nav -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <ul class="hide-bullets">

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/100"></a>
    </li>

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/100"></a>
    </li>

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/100"></a>
    </li>

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/100"></a>
    </li>
  </ul>

</div>

Upvotes: 2

Related Questions