Gallery Card Slider


This code snippet is a gallery slider component that uses Bootstrap cards in a carousel layout to showcase a collection of images such as product images, photographs, or artwork. It is responsive and adjustable depending on the screen size, and provides consistent styling for the images and different elements. It utilizes Bootstrap’s carousel functionality for automatic scrolling of the images and each image is displayed in a Bootstrap card with a title and description. It provides a visually pleasing and dynamic way to showcase products, services or a portfolio of images.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-3 mb-md-5">
			<div class="col-lg-8 col-xxl-7">
				<span class="text-muted">Showcase</span>
				<h2 class="display-5 fw-bold mb-3">Our Gallery</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="carousel slide pointer-event" data-bs-ride="carousel" id="portfolioCarousel">
			<div class="carousel-inner">
				<div class="carousel-item p-4">
					<div class="row g-5">
						<div class="col-md-4">
							<div class="card border-0 rounded-0 shadow mb-4 mb-md-0">
								<img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png">
								<div class="card-body text-center mt-3">
									<h6>Catchy Title One</h6>
									<div class="text-muted">
										Project Details
									</div>
									<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="card border-0 rounded-0 shadow mb-4 mb-md-0">
								<img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png">
								<div class="card-body text-center mt-3">
									<h6>Catchy Title Two</h6>
									<div class="text-muted">
										Project Details
									</div>
									<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="card border-0 rounded-0 shadow mb-4 mb-md-0">
								<img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png">
								<div class="card-body text-center mt-3">
									<h6>Catchy Title Three</h6>
									<div class="text-muted">
										Project Details
									</div>
									<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item p-4 active">
					<div class="row g-5">
						<div class="col-md-4">
							<div class="card border-0 rounded-0 shadow mb-4 mb-md-0">
								<img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png">
								<div class="card-body text-center mt-3">
									<h6>Catchy Title Four</h6>
									<div class="text-muted">
										Project Details
									</div>
									<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="card border-0 rounded-0 shadow mb-4 mb-md-0">
								<img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png">
								<div class="card-body text-center mt-3">
									<h6>Catchy Title Five</h6>
									<div class="text-muted">
										Project Details
									</div>
									<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="card border-0 rounded-0 shadow mb-4 mb-md-0">
								<img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png">
								<div class="card-body text-center mt-3">
									<h6>Catchy Title Six</h6>
									<div class="text-muted">
										Project Details
									</div>
									<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#portfolioCarousel" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#portfolioCarousel" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>
		</div>
	</div>
</section>
To top