1

I was trying to make a Carousel containing multiple images in row and sliding one images at a time with bootstrap only. Like this:

enter image description here

I tried following this post. Instead of bootstrap-3.3.6 and jquery-2.2.2 I used bootstrap-4.3.1 and jquery-3.3.1 But in my case images are in vertical order instead of horizontal order. What am I doing wrong? How can I arrange images in horizontal order?

$(document).ready(function () {
  $('.fdi-Carousel .carousel-item').each(function () {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});
#outerCarousel {
  width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}
.carousel-inner.onebyone-carousel {
  margin: auto;
  width: 90%;
}
.onebyone-carousel .active.carousel-item-left {
  left: -33.33%;
}
.onebyone-carousel .active.carousel-item-right {
  left: 33.33%;
}
.onebyone-carousel .carousel-item-next {
  left: 33.33%;
}
.onebyone-carousel .carousel-item-prev {
  left: -33.33%;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <main role="main">
      <div class="container">
        <div class="row">
          <div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000"
               data-pause="false">
            <div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="0"
                 data-pause="false">
              <div class="carousel-inner onebyone-carousel">
                <div class="carousel-item active">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/4287f5/000&amp;text=1">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/f57b42/000&amp;text=2">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/42f58a/000&amp;text=3">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/a442f5/000&amp;text=4">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/d1f542/000&amp;text=5">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/f5429e/000&amp;text=6">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/42cef5/000&amp;text=7">
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#innerCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#innerCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
  </body>
</html>

Thanks.

Partho63
  • 3,117
  • 2
  • 21
  • 39

2 Answers2

2

First, the code you provided was pretty buggy. I believe there are many online carousel example that are just copy&paste from someone else but never try to understand the code, instead, they keep adding more buggy code to fix the problem they can "see", just be careful.

There are many useless <div> wrappers and CSS stylings that intend to fix the buggy behaviors, which obviously makes the debug process worse.

I kindly suggest that you can take a look at the official document first to see the structure for those component and then slowly implement the ideas based on the SO answers.

I just delete most of them from your code for demonstration purpose only.

In order to make it responsive, I believe you have to modify the js code so it can fill up the carousel for different col-size as well as CSS. But it seems like there is not an easy way to work around for CSS part.

$(document).ready(function () {
  $('.fdi-Carousel .carousel-item').each(function () {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    
    //this will only work for carousel with 3 items since it only adds next() and  next.next();

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}

.fdi-Carousel .carousel-inner .active.carousel-item,
.fdi-Carousel .carousel-inner .carousel-item-next,
.fdi-Carousel .carousel-inner .carousel-item-prev {
  display: flex;
} 

/* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX()  for differernt col' */
.fdi-Carousel .carousel-inner .active.carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-prev {
  transform: translateX(-33.33%);
}
.fdi-Carousel .carousel-inner .active.carousel-item-right, .fdi-Carousel .carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

.fdi-Carousel .carousel-inner .carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-right {
  transform: translateX(0);
  }
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"  crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
      <div class="container-fluid">
        <div class="row w-100">
          <div class="col">
          <div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000">
              <div class="carousel-inner row no-gutters">
                <div class="carousel-item active">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/4287f5/000&amp;text=1">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/f57b42/000&amp;text=2">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/42f58a/000&amp;text=3">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/a442f5/000&amp;text=4">
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#outerCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#outerCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
          </div>
        </div>
      </div>
      </div>
  </body>
</html>
Yunhai
  • 1,283
  • 1
  • 11
  • 26
0

$(document).ready(function() {
  $('.fdi-Carousel .carousel-item').each(function() {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    } else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});
#innerCarousel {
  width: 100%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}

.carousel-inner.onebyone-carousel {
  margin: auto;
  width: 90%;
}

.onebyone-carousel .active.carousel-item-left {
  left: -33.33%;
}

.onebyone-carousel .active.carousel-item-right {
  left: 33.33%;
}

.onebyone-carousel .carousel-item-next {
  left: 33.33%;
}

.onebyone-carousel .carousel-item-prev {
  left: -33.33%;
}

.carousel-item img {
  width: 33%;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <main role="main">
    <div class="container">
      <div class="row">
        <div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000" data-pause="false">
          <div class="carousel-inner onebyone-carousel">
            <div class="carousel-item active">
              <img src="http://placehold.it/100/4287f5/000&amp;text=1">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/f57b42/000&amp;text=2">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/42f58a/000&amp;text=3">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/a442f5/000&amp;text=4">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/d1f542/000&amp;text=5">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/f5429e/000&amp;text=6">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/42cef5/000&amp;text=7">
            </div>
          </div>
          <!-- .carousal-inner -->

          <a class="carousel-control-prev" href="#innerCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#innerCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
        <!-- .carousel -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </main>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

The code is fixed using some HTML and CSS modifications. The fix will make carousal images be displayed in horizontal layout. Here are the list of things I changed

  1. Added width to img in the carousel
  2. Removed the div.col-md-4
  3. Removed #outerCarousel
StrikerVillain
  • 3,719
  • 2
  • 24
  • 41