My goal was to create a slider with divisions inside a bootsrap carousel, and here is what I did. However, I am looking for guidance on how to adjust it so that on screens smaller than sm (of bootstrap), there are only two divisions in one carousel, and a carousel slider is added to have three sliders with two divisions each. For this example, let's assume that the first slider will only contain "hello" and "hello1", the second slider will have "hello2", "hello3", and a new slider will be added with "hello4" and "hello5".
Please advise me on how to achieve this using either bootstrap, javascript, or jquery.
For better reference, you can view an example here.
Thanks a lot!
.box{
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.r{
background-color: red;
}
.g{
background-color: gray;
}
.b{
background-color: blue;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726e726c713e39283d6d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 col-sm-4 box r">Hello</div>
<div class="col-md-4 col-sm-4 box g">Hello1</div>
<div class="col-md-4 col-sm-4 box b">Hello2</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 col-sm-4 box r">Hello3</div>
<div class="col-md-4 col-sm-4 box g">Hello4</div>
<div class="col-md-4 col-sm-4 box b">Hello5</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a11161117041525504b574b55480700110454">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>