Bootstrap 3 Tutorial

Bootstrap 3 Carousel

Last modified on: October 28, 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">&nbsp;</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="6a05955e-0e46-49aa-a3e8-f3cdfaeb7124" 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">
<h3>Bootstrap 3 Carousel</h3>
<p>The Bootstrap 3 Carousel component provides a flexible and customizable way to display a series of images or content in a slideshow format. This component is useful for creating image galleries, hero sections, or any content that benefits from visual rotation.</p>
<hr />
<h3>1. Basic Structure</h3>
<p>A Bootstrap 3 Carousel consists of a main wrapper <code>.carousel</code>, with a series of <code>.item</code> elements representing the slides. The component also includes navigation controls and indicators for easy browsing.</p>
<h4>Example of a Basic Carousel</h4>
<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="myCarousel" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;

&lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=Slide+1" alt="Slide 1"&gt;
            &lt;div class="carousel-caption"&gt;
                &lt;h3&gt;Slide 1 Heading&lt;/h3&gt;
                &lt;p&gt;Description for Slide 1.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;div class="item"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=Slide+2" alt="Slide 2"&gt;
            &lt;div class="carousel-caption"&gt;
                &lt;h3&gt;Slide 2 Heading&lt;/h3&gt;
                &lt;p&gt;Description for Slide 2.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;div class="item"&gt;
            &lt;img src="https://via.placeholder.com/800x400?text=Slide+3" alt="Slide 3"&gt;
            &lt;div class="carousel-caption"&gt;
                &lt;h3&gt;Slide 3 Heading&lt;/h3&gt;
                &lt;p&gt;Description for Slide 3.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- Left and right controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" 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>
<h3>2. Adding Carousel Functionality</h3>
<p>To enable the carousel functionality, ensure you include the necessary Bootstrap JavaScript and jQuery files. Bootstrap's JavaScript requires jQuery as a dependency.</p>
<h4>Example of Including Dependencies</h4>
<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;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Customizing the Carousel</h3>
<p>You can customize the carousel's behavior by adding attributes like <code>data-interval</code> to control the timing of slide transitions and <code>data-pause</code> to control whether the carousel pauses on hover.</p>
<h4>Example of Customized Carousel</h4>
<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="myCustomCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="hover"&gt;
    &lt;!-- Similar structure as above --&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Additional Options</h3>
<ul>
<li><strong>Captions</strong>: Add captions using the <code>.carousel-caption</code> class for better context.</li>
<li><strong>Images</strong>: Use images or any other HTML content inside the <code>.item</code> divs.</li>
<li><strong>Responsive Design</strong>: Ensure images are responsive by using classes like <code>img-responsive</code>.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>The Bootstrap 3 Carousel is a powerful component that allows you to create engaging and interactive image or content sliders. By utilizing the provided structure and customizing it according to your needs, you can enhance your website's visual appeal and user experience. Use this component to showcase your best content effectively!</p>

Web Technology View More