→ Ad Apon7
→ slider

slider

This bootstrap css example is contributed by Ad Apon7, on 08-May-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Hero

Author Ad Apon7

v.5.3

Fork Fullscreen

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.dqsglobal.com%2Fvar%2Fsite%2Fstorage%2Fimages%2F3%2F9%2F4%2F7%2F2567493-1-ger-DE%2F0ecf43ac2388-secure-coding-ism-dqs-shutterstock-1569125488.jpg&f=1&nofb=1&ipt=739ae19d63d949f1c5e62cf93e711c8d74fd7697e4bb6a20ad9cfdc6264ae940" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic.vecteezy.com%2Fsystem%2Fresources%2Fpreviews%2F051%2F261%2F577%2Flarge_2x%2Fperson-coding-on-a-laptop-with-vibrant-programming-code-on-the-screen-photo.jpeg&f=1&nofb=1&ipt=1826f7334ab42be0b8de5029e90ae2a9f79bffd05574009013265cd9dd7edf73" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic.vecteezy.com%2Fsystem%2Fresources%2Fthumbnails%2F048%2F038%2F959%2Foriginal%2Fisometric-laptop-animation-3d-isometric-laptop-computer-abstract-programming-language-and-program-code-on-a-laptop-screen-transparent-background-with-alpha-channel-free-video.jpg&f=1&nofb=1&ipt=5f0ab2eab16523dad350c7e82ab2adfa7cdb28f604ec4b0caf16ca8ca799a428" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
            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="#carouselExampleAutoplaying"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

More Examples

Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

1 year ago

8k

v.5.3
Section Title

Author:
istiakahmedchowdhury10

3 months ago

211

v.4.6
mision and vission

Author:
Ad Apon7

6 months ago

822

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.8k

v.4.6
marquee track

Author:
Juan Antonio González Hernández

7 months ago

1.1k

v.4.6
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

2 years ago

6.1k

v.5.3
portfoilo page

Author:
Ad Apon7

5 months ago

420

v.5.3
portfolio page

Author:
Md. Hasibur Rahman

4 months ago

255

v.4.6
Personal Portfolio About Section

Author:
Creative Araf

4 months ago

503

v.5.3
Existing Client Section

Author:
istiakahmedchowdhury10

3 months ago

151

v.4.6
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

5 months ago

591

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

3 months ago

666

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent