Bootstrap Simple Carousel

Published by www.coding30.com
bootstrap carosuls

Introduction:

The Bootstrap carousel is a component in the Bootstrap framework that provides images slide show built with css and little bit javascript. It works with custom images series with text.It also includes support for previous/next controls and indicators.Bootstrap carousel is the widely used in web development field.

All Features of Bootstrap Carousel:

  • The Bootstrap Carousel is designed to be responsive, and automatically adjust the device screen size because bootstrap use media quesry css.
  • It supports various slide transition effects such as sliding horizontally ,vertically, fading in and out, and more.
  • You can include multiple images slides within a single carousel, allowing you to display a sequence of images or content.
  • Bootstrap carousel provide best navigation controls like arrows or buttons and you can use custom arrows and buttons.
  • Bootstrap carousel provide autoplay start automatically and set custom time intervals.

Block of code explanation:

  • This is the simple bootstrap carousel code. In this code, we are using html5, css3, and little bit javascript.

    • Code here... 

    							
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head><script src="../assets/js/color-modes.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="coding30.com">
<meta name="generator" content="Hugo 0.118.2">
<title>coding30.com carousel</title>
	<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/carousel/">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="bootstrap.min.css" rel="stylesheet">
	<style>
		.bd-placeholder-img {
		font-size: 1.125rem;
		text-anchor: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		}
		@media (min-width: 768px) {
		.bd-placeholder-img-lg {
			font-size: 3.5rem;
		}
		}
		.btn-bd-primary {
		--bd-violet-bg: #712cf9;
		--bd-violet-rgb: 112.520718, 44.062154, 249.437846;

		--bs-btn-font-weight: 600;
		--bs-btn-color: var(--bs-white);
		--bs-btn-bg: var(--bd-violet-bg);
		--bs-btn-border-color: var(--bd-violet-bg);
		--bs-btn-hover-color: var(--bs-white);
		--bs-btn-hover-bg: #6528e0;
		--bs-btn-hover-border-color: #6528e0;
		--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
		--bs-btn-active-color: var(--bs-btn-hover-color);
		--bs-btn-active-bg: #5a23c8;
		--bs-btn-active-border-color: #5a23c8;
		}
		.bd-mode-toggle .dropdown-menu .active .bi {
		display: block !important;
		}
	</style>
	<link href="carousel.css" rel="stylesheet">
	</head>
	<body>
<main>
	<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
	<div class="carousel-indicators">
		<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
	</div>
	<div class="carousel-inner">
		<div class="carousel-item active">
		<img class="bd-placeholder-img" src="1.jpg" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"/>
		<div class="container">
			<div class="carousel-caption">
			<h1 style="background-color:white;color:black">Write the heading text.</h1>
			<p class="opacity-75"  style="background-color:white;color:black">>Some representative placeholder content for the first slide of the carousel.</p>
			<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
			</div>
		</div>
		</div>
		<div class="carousel-item">
		<img class="bd-placeholder-img" src="2.jpg" width="100%" height="100%"  aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"/>
		<div class="container">
			<div class="carousel-caption">
			<h1 style="background-color:white;color:black">Write the heading text.</h1>
			<p style="background-color:white;color:black">Some representative placeholder content for the second slide of the carousel.</p>
			<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
			</div>
		</div>
		</div>
		<div class="carousel-item">
		<img class="bd-placeholder-img" width="100%" height="100%" src="3.jpg"  aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"/>
		<div class="container">
			<div class="carousel-caption">
			<h1 style="background-color:white;color:black">Write the heading text.</h1>
			<p style="background-color:white;color:black">Some representative placeholder content for the third slide of this carousel.</p>
			<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
			</div>
		</div>
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Next</span>
	</button>
	</div>
</main>
<script src="bootstrap.bundle.min.js"></script>
	</body>
</html>



Conclusion:
  • The Bootstrap Carousel provides an effective way to present dynamic content, such as images, in a visually engaging slideshow format.
  • Users can easily navigate through the carousel using built-in controls like arrows or indicators, improving the overall user experience.
  • The Carousel is designed to be responsive various devices and screen sizes.