Bootstrap 4 Tutorial

BS4 Carousel

Last modified on: October 26, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8"><span style="font-size: 24pt;">Bootstrap 4 Carousel</span></h2>
<p>The Bootstrap 4 Carousel component allows you to create a responsive slideshow for cycling through elements&mdash;such as images or text&mdash;on your website. It offers a simple way to showcase multiple items in a single space, enhancing the visual appeal and functionality of your site.</p>
<hr />
<h1><span style="font-size: 18pt;">Overview</span></h1>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="4508d6d2-750c-4905-afe6-dc99100aed9a" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>The carousel features images or content that automatically transitions at specified intervals, and users can also manually navigate through items using indicators and controls. It's built with HTML, CSS, and JavaScript, making it easy to integrate into your Bootstrap projects.</p>
<h2>Basic Carousel Structure</h2>
<h3>Example: Simple Image Carousel</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div id="carouselExample" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
        &lt;div class="carousel-item active"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=First Slide" class="d-block w-100" alt="First Slide"&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=Second Slide" class="d-block w-100" alt="Second Slide"&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=Third Slide" class="d-block w-100" alt="Third Slide"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"&gt;
        &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"&gt;
        &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Carousel with Indicators</h2>
<p>You can enhance the carousel by adding indicators to help users navigate through the slides.</p>
<h3>Example: Carousel with Indicators</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div id="carouselIndicators" class="carousel slide" data-ride="carousel"&gt;
    &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#carouselIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselIndicators" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselIndicators" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner"&gt;
        &lt;div class="carousel-item active"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=First Slide" class="d-block w-100" alt="First Slide"&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=Second Slide" class="d-block w-100" alt="Second Slide"&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=Third Slide" class="d-block w-100" alt="Third Slide"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev"&gt;
        &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next"&gt;
        &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Complete Example: Bootstrap 4 Carousel</h2>
<p>Here&rsquo;s a complete example demonstrating a carousel with images and indicators.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 4 Carousel Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 Carousel Example&lt;/h1&gt;
        &lt;div id="carouselExample" class="carousel slide" data-ride="carousel"&gt;
            &lt;ol class="carousel-indicators"&gt;
                &lt;li data-target="#carouselExample" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                &lt;li data-target="#carouselExample" data-slide-to="1"&gt;&lt;/li&gt;
                &lt;li data-target="#carouselExample" data-slide-to="2"&gt;&lt;/li&gt;
            &lt;/ol&gt;
            &lt;div class="carousel-inner"&gt;
                &lt;div class="carousel-item active"&gt;
                    &lt;img src="https://via.placeholder.com/800x400?text=First Slide" class="d-block w-100" alt="First Slide"&gt;
                &lt;/div&gt;
                &lt;div class="carousel-item"&gt;
                    &lt;img src="https://via.placeholder.com/800x400?text=Second Slide" class="d-block w-100" alt="Second Slide"&gt;
                &lt;/div&gt;
                &lt;div class="carousel-item"&gt;
                    &lt;img src="https://via.placeholder.com/800x400?text=Third Slide" class="d-block w-100" alt="Third Slide"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"&gt;
                &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"&gt;
                &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Next&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More