Carousel क्या है
एक carousel एक slideshow जैसा है: यह खुद कुछ pictures या cards के आर-पार flip करता है, या जब आप sides पर arrows tap करते हैं।
In this page:
Syntax
<div id="carousel-id" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button data-bs-target="#carousel-id" data-bs-slide-to="0" class="active"></button>
<button data-bs-target="#carousel-id" data-bs-slide-to="1"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">slide content</div>
<div class="carousel-item">slide content</div>
</div>
<button class="carousel-control-prev" data-bs-target="#carousel-id" data-bs-slide="prev">...</button>
<button class="carousel-control-next" data-bs-target="#carousel-id" data-bs-slide="next">...</button>
</div>Carousel
Carousel component slides की एक series के आर-पार cycle करता है -- images, cards, या कोई भी HTML -- या तो automatically या next/previous controls के जरिए। हर slide को .carousel-inner के अंदर एक .carousel-item में wrap करें, और exactly एक को active mark करें ताकि यह पहले दिखे।
Note:
Carousel को एक unique
id दें और इसे page load होते ही auto-cycling शुरू करने के लिए outer .carousel element पर data-bs-ride="carousel" set करें।उदाहरण: Carousel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex align-items-center justify-content-center text-white fs-3" style="height:220px;background:linear-gradient(135deg,#0d6efd,#6610f2);">Slide 1</div>
</div>
<div class="carousel-item">
<div class="d-flex align-items-center justify-content-center text-white fs-3" style="height:220px;background:linear-gradient(135deg,#198754,#20c997);">Slide 2</div>
</div>
<div class="carousel-item">
<div class="d-flex align-items-center justify-content-center text-white fs-3" style="height:220px;background:linear-gradient(135deg,#dc3545,#fd7e14);">Slide 3</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" 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="#demoCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>Live Example
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- exactly एक
.carousel-itemपरactiveclass रखना भूल जाना, जो carousel को बिल्कुल कुछ न दिखाने देता है। - एक page पर same carousel
idदो बार reuse करना, इसलिए indicators और controls के दोनों sets गलत carousel drive करते हैं। - Bootstrap JS bundle छोड़ देना, इसलिए auto-cycling, indicators, और prev/next controls सब silently कुछ नहीं करते।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: