→ Anonymous
→ Carousel

Carousel

This bootstrap css example is contributed by Anonymous, on 20-Mar-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Carousel

Author Anonymous

1.6k

v.4.6

Fork Fullscreen

<div id="starryCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#starryCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#starryCarousel" data-slide-to="1"></li>
    <li data-target="#starryCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/1920x1080?text=Slide+1" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1920x1080?text=Slide+2" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1920x1080?text=Slide+3" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#starryCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#starryCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

More Examples

Gallery carousel

Author:
java stories story

3 months ago

801

v.5.3
Caraousel testimoni

Author:
java stories story

2 months ago

584

v.5.3
Testimonial carousel

Author:
Sofia Petrova

1 year ago

1.9k

v.5.3
Interactive image carousel using Bootstrap 5
Full-width carousel with automatically sliding images

Author:
Prajwal Hallale

1 year ago

3.1k

v.5.3
Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

1 year ago

2.4k

v.5.3
Elegant testimonial carousel
Interactive testimonial carousel with user avatars

Author:
Sofia Petrova

1 year ago

3.1k

v.5.3
Calender

Author:
Anonymous

1 year ago

1.4k

v.4.6
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

1 year ago

8k

v.4.6
Search section

Author:
Ankit khedkar

1 year ago

2.2k

v.5.3
Gradient Pagination

Author:
Levi Treadwell

11 months ago

1.2k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

1 year ago

4.1k

v.5.3
Pricing card
Product pricing card made with bootstrap 5

Author:
Omar Khaled

11 months ago

1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent