→ 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

Clean hero section with image
tugas

Author:
Anonymous

10 months ago

1.3k

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

2 years ago

3.5k

v.5.3
Basic hero
Hero section with background image

Author:
Prajwal Hallale

2 years ago

4.6k

v.4.6
aboutContwnt

Author:
Sahin Miah

3 weeks ago

66

v.4.6
Animated hero section

Author:
Anonymous

2 years ago

7.3k

v.5.3
portfoilo page

Author:
Ad Apon7

4 weeks ago

73

v.5.3
Personal Biography section

Author:
Ad Apon7

3 weeks ago

127

v.5.3
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

1 week ago

38

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

Author:
Isaac Winslow

1 year ago

7.1k

v.5.3
Simple hero section

Author:
Mateo Rojas

1 year ago

7.1k

v.5.3
Elon Musk 2
hero to last home

Author:
RAHAT RAHMAN OFICIAL

3 weeks ago

65

v.4.6
home_all_contant

Author:
Sahin Miah

3 weeks ago

76

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent