→ 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

382

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

Elegant testimonial carousel
Interactive testimonial carousel with user avatars

Author:
Sofia Petrova

6 months ago

549

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

Author:
Prajwal Hallale

10 months ago

391

v.5.3
Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

10 months ago

445

v.5.3
Testimonial carousel

Author:
Sofia Petrova

6 months ago

493

v.5.3
Sign in with Google

Author:
Juan Martinez

6 months ago

1.7k

v.5.3
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

10 months ago

332

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

Author:
Prajwal Hallale

10 months ago

887

v.5.3
Login with Twitter button bootstrap
Twitter (now known as X) Sign-in Button

Author:
Omar Khaled

5 months ago

1.4k

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

4 months ago

3.3k

v.4.6
Navbar
a responsive navbar with search and sticky ans Header

Author:
almounkez

1 month ago

203

v.5.3
Interactive Service Cards | Bootstrap 5.3
Modern Bootstrap 5.3 component with elegant card rotations and hover animations. Perfect for featuring services, products, or team members

Author:
Anonymous

1 month ago

495

v.5.3
Responsive Tag Chips

Author:
Kemaya m

1 month ago

133

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent