I attempted to create a Carousel using bootstrap that displays multiple images in a row and slides one image at a time, similar to this:
https://i.sstatic.net/tw22R.png
I followed this post. Instead of using bootstrap-3.3.6 and jquery-2.2.2, I used bootstrap-4.3.1 and jquery-3.3.1. However, my images are displayed in a vertical order rather than a horizontal order. What am I missing? How can I arrange the images in a 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="carouse... (length: 4724 characters)Thank you.