bootstrap 4 grid - row with slider - html

Question

I have 6 photos and on md size I would like to have a slider to show them all, on lg they are all displayed side by side and on sm they are displayed 1 per row so there is no problem. Basically I am saying that I don't want to have 2 rows on md but 1 with a slider.
Here is how it looks now
but I would like to make it look like this
the blue line is supposed to be a slider that slides right to reveal more photos.
This is the code I am using now
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/gta5.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/rust.jpg" alt="" class="rounded">
</a>
</div>
</div>
Is it possible to do? What do i have to learn to do it? Any links would be appreciated.

Answer 1

You may use the media query to set the flex-wrap and overflow for the respective screen width. I have set the minimum width as 768px and max-width as 991.98px. You may change it accordingly. Please run the code snippet for the output.
#media (min-width: 768px) and (max-width: 991.98px) {
.row {
flex-wrap: nowrap !important;
overflow: auto !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<!-- <img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/gta5.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/rust.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
</div>

Answer 2

You can dynamically create a corousel item (slide) for each of 4 card by using js and use corousel of bootstrap 4 to show sliding row.
Corousel

Answer 3

Instead of putting up a slider to move around the images, we can actually create a carousel effect with bootstrap. It will provide a breath-taking experience to the users. Here's the code for it.
PS: Edit the class and ID names as per your requirements.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>