35 Best Bootstrap Carousel Examples for 2024
Alex Anie
Posted On: December 28, 2023
150903 Views
27 Min Read
Organizing web content can be overwhelming, especially when the types of content you want to add to your web page are in groups and contain text, images, or videos.
Think of a scenario where you want to buy a product online, and every product on the web page is stacked on top of one another (vertically), making you keep scrolling just to find the one you want to buy or having to navigate between multiple pages to search for related items you wish to purchase. This can be a tedious and unpleasant user experience for the users.
To fix these, we can implement or design each element on the web page as a carousel, where all elements can be categorized based on their similarities. This will enable users to select items and navigate between relative items with ease on the web page.
However, carousels can be time-consuming when implemented from scratch on the web. This is due to the endless cross browser testing required for elements to be browser-compatible and the need for each carousel component, such as button controls, picker controls, and sliders, to function across different screen sizes correctly.
Additionally, responsiveness must be achieved across different screen resolutions for a better user experience on different platforms such as TV, desktop, tablets, and mobile. This is where the Bootstrap carousel can be implemented.
In this blog post, we will explore 35 Bootstrap carousel examples for 2024.
These Bootstrap carousel examples will be from various websites and mobile applications so you can get inspiration for your project. We’ll also provide code snippets so that you can easily incorporate them into your projects.
By the end of the blog on Bootstrap carousel examples, you should be able to create and customize your own Bootstrap carousel from scratch and implement it on your website.
TABLE OF CONTENTS
What are Bootstrap Carousels?
Bootstrap carousels are ways web developers and designers can create beautiful and eye-catching carousel components using Bootstrap CSS template.
They provide out-of-the-box functionality such as auto-rotating slides, slider controls, picker controls, CSS breakpoints, random transition effects, animations, and responsive layouts on different screen resolutions. They can be highly customizable with other Bootstrap template components such as accordions, alerts, badges, breadcrumbs, cards, buttons, navbars, pagination, and models.
In the next section of this blog on Bootstrap carousel examples, we will discuss some factors to consider when designing carousels.
Keys Areas to Consider Before Designing Bootstrap Carousels
Bootstrap comes with advanced carousel features that can improve how users interact with carousels on the web page. From beautiful fancy animations and transition effects to responsive components and browser-compatible properties, the list of what we can do is endless. However, there are important things to consider before designing a Bootstrap carousel, which are:
- Auto-rotation: This will enable carousel sliders to repeat their sequence after completion continuously.
- Manual-rotation: This is when the carousel control buttons are used as a way to navigate the slides.
- Draggable sliders: This feature lets each slider element function as a draggable control for navigating the carousel elements left and right.
- Breakpoints: By default, Bootstrap components are responsive. However, at every breakpoint (different screen sizes), we can determine or realign components of the carousel for better responsiveness.
- Single or multiple carousel view: Carousels can either be single view (only one element showing at a time) or multiple view (more than one element showing at a time).
These are some key areas you can consider before designing a carousel, as this can improve performance and user experience. In the section below, we will discuss the best Bootstrap carousel examples.
Best Bootstrap Carousels Examples
We’ve seen some key areas that need to be considered before designing a carousel. However, some Bootstrap carousel examples are worth noting due to their high usage across multiple websites and mobile applications.
Let’s look at the best Bootstrap carousel examples!
Background Carousel
Background carousel sliders are one of the popular Bootstrap carousel examples designed to run automatically as background-image sliders. This enables other elements to be positioned around it while the sliders navigate smoothly on the background as a slideshow. The background carousel sliders can be found majorly on eCommerce and movie listing websites such as Amazon and Netflix.
The above Bootstrap carousel example is a background carousel slider made with a Bootstrap 5.3 template. In this Bootstrap carousel example, we positioned a three-column card display over a Bootstrap background carousel. This enabled the carousel to function as a slideshow below the card items. So, users can easily navigate across different carousel slides while interacting with the card components at the same time.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Background Carousel</title> </head> <body> <main class="carousel-container"> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <!-- Image One --> <div class="carousel-item active"> <img src="https://user-images.githubusercontent.com/78242022/282570803-1407fdb3-1799-4f77-9690-10939e41aca7.jpg" class="d-block w-100" alt="..."> </div> <!-- Image Two --> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/282570839-ceb5e58a-692e-4bb0-a619-90cca31fe2ba.jpg" class="d-block w-100" alt="..."> </div> <!-- Image Three --> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/282570850-e5f2d5eb-789c-433d-8698-e9f87d4722ce.jpg" class="d-block w-100" alt="..."> </div> </div> <!-- Carousel Control Previous --> <div class="button-wrapper"> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <!-- Carousel Control Next --> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </main> <!--[End of Carousel controls]--> <main class="card-container container"> <section class="card-wrapper"> <!-- [First Group] --> <div class="row gap-3"> <!-- Card One --> <div class="card col-12 col-lg-3 col-md-4 p-2"> <img src="https://user-images.githubusercontent.com/78242022/275325801-46647930-1af3-404b-83e0-17d9cc6d25ee.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Apple TV 4K</h5> <p class="card-text"> From $999 or $41.62/mo.per month for 24 mo.months Footnote.</p> <a href="#" class="btn btn-primary">Shop Now</a> </div> </div> <!-- Card Two --> <div class="card col-12 col-lg-3 col-md-4 p-2"> <img src="https://user-images.githubusercontent.com/78242022/275325804-b50e03a8-20f9-46d1-a437-ff661fbcc22f.png" alt="..."> <div class="card-body"> <h5 class="card-title">Apple iPad</h5> <p class="card-text"> From $799or $66.58/mo.per month for 12 mo.monthsFootnote</p> <a href="#" class="btn btn-primary">Shop Now</a> </div> </div> <!-- Card Three --> <div class="card col-12 col-lg-3 col-md-4 p-2"> <img src="https://user-images.githubusercontent.com/78242022/275325807-1c855f6a-cb67-41e5-95bc-d08f2a259535.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">iPhone </h5> <p class="card-text"> From $799or $33.29/mo.per month for 24 mo.monthsFootnote* Buy</p> <a href="#" class="btn btn-primary">Shop Now</a> </div> </div> <!-- Card Four --> <div class="card col-12 col-lg-3 col-md-4 p-2"> <img src="https://user-images.githubusercontent.com/78242022/275325809-96a5012a-34e6-45a4-9952-2cd66e32866f.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Apple Watch Ultra 2</h5> <p class="card-text">From $799or $66.58/mo. per month for 12 mo.monthsFootnote*</p> <a href="#" class="btn btn-primary">Shop Now</a> </div> </div> <!-- Card Five --> <div class="card col-12 col-lg-3 col-md-4 p-2" > <img src="https://user-images.githubusercontent.com/78242022/275325810-01d95b79-2cd6-4319-88a3-c9a565800956.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Mac</h5> <p class="card-text"> From $249or $20.75/mo. per month for 12 mo. months Footnote</p> <a href="#" class="btn btn-primary">Shop Now</a> </div> </div> <!-- Card Six --> <div class="card col-12 col-lg-3 col-md-4 p-2"> <img src="https://user-images.githubusercontent.com/78242022/275325803-3133f022-23fd-4f6b-97a9-6e82365b2b74.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">HomePod Access</h5> <p class="card-text"> From $999 or $41.62/mo.per month for 24 mo.months Footnote.</p> <a href="#" class="btn btn-primary">Shop Now</a> </div> </div> </div> </div> </section> </main> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/js/Bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
html { overflow-x: hidden; } body { position: relative; } .carousel-item { width: 100vw; height: 100vh; } .carousel-item img { width: 100vw; object-fit: cover; } .card-container { position: absolute; top: 200px; left: 10%; } .card { width: 15rem; } .card img { width: 100%; } @media (max-width: 576px) { .carousel-item img { width: 100vw; } .card { width: 12em; } .carousel-control-prev, .carousel-control-next { position: absolute; top: -300px; } .card-container { position: absolute; top: 200px; left: 20%; } } @media (max-width: 500px) { .card-container { position: absolute; left: 1ch; } } @media (max-width: 360px) { .carousel-item img { width: 100vw; } .card { width: 10em; } .carousel-control-prev, .carousel-control-next { position: absolute; top: -500px; } .card-container { position: absolute; top: 100px; left: 18%; } } |
See the Pen
Bootstrap background carousel by Ocxigin (@ocxigin)
on CodePen.
Bootstrap 5 Banner Sliders Carousel
Banner carousels are very common types of carousels found mainly on eCommerce websites. This banner carousel displays ads and is usually placed directly below the navbar. This allows visitors to view the carousel ads as soon as they log into the web page.
A typical Bootstrap carousel example of a slider banner can be found on websites like Walmart, Amazon, eBay, Best Buy, and others. When a banner carousel is well implemented, it can send a good message to the user about the brand.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Banner Carousel</title> </head> <style> </style> <body> <main> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button> </div> <!-- Image Sliders --> <div class="carousel-inner"> <!-- Image one--> <div class="carousel-item active"> <img src="https://user-images.githubusercontent.com/78242022/273443252-b034e050-3d70-48ef-9f0f-2d77ef9b2604.jpg" class="d-block w-100" alt="..."> </div> <!-- image two --> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/282697437-bb8d7140-128f-44e9-a11f-d0d5c8d29f87.png" class="d-block w-100" alt="..."> </div> <!-- Image Three --> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/273443248-130249b5-87b7-423d-9281-48d810bcd30d.jpg" class="d-block w-100" alt="..."> </div> <!-- Image Four --> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/273443251-9c210d6f-35ba-4861-885e-9b2e684ab339.jpg" class="d-block w-100" alt="..."> </div> <!-- Image Five --> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/282697428-7690f46f-5446-475a-be69-dbf5d8ccfacd.png" class="d-block w-100" alt="..."> </div> </div> <!-- Carousel Controls --> <section> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </section> </div> </main> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/js/Bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html> |
See the Pen
Bootstrap 5 Banner Carousel Sliders by Ocxigin (@ocxigin)
on CodePen.
Product Review Carousel
Product review carousel is one of the best Bootstrap carousel examples that can be used to review different sections, angles, use cases of a particular item. Depending on the item or items being reviewed, a product review carousel can be implemented across multiple websites for different reasons.
For example, an eCommerce website will display a mobile phone for review with other snapshots of the same products. This allows users to click through every image to see the phone from a different angle.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <main class="carousel-container"> <section class="carousel-wrapper"> <aside class="buttons"> <div class="carousel-btn btn1 bg-primary shadow-sm rounded"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"> <img src="https://user-images.githubusercontent.com/78242022/282707979-d7fe3128-58fc-47b9-bcf7-9150b311a403.png" class="d-block w-100" alt="..."> </button> </div> <div class="carousel-btn btn2 bg-primary shadow-sm rounded"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" class=""> <img src="https://user-images.githubusercontent.com/78242022/282707987-d7bf8524-eb9c-441d-85e6-e53df7b4fa89.png" class="d-block w-100" alt="..."> </button> </div> <div class="carousel-btn btn3 bg-primary shadow-sm rounded"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"> <img src="https://user-images.githubusercontent.com/78242022/282707992-e7980555-a6b1-48f5-9416-079f9a7ca8fe.png" class="d-block" alt="..."> </button> </div> <div class="carousel-btn btn4 bg-primary shadow-sm rounded"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"> <img src="https://user-images.githubusercontent.com/78242022/282707999-8d9ee011-b0da-4512-9d46-42f5e774cf5d.png" class="d-block" alt="..."> </button> </div> </aside> <!-- Carousel --> <aside class="carousel" id="carouselExampleIndicators" class="carousel slide carousel-wrapper d-flex flex-row" data-bs-ride="carousel"> <section class="carousel-inner"> <div class="carousel-box box1 carousel-item active bg-primary shadow-sm rounded"> <img src="https://user-images.githubusercontent.com/78242022/282707979-d7fe3128-58fc-47b9-bcf7-9150b311a403.png" class="d-block w-100" alt="..."> </div> <div class="carousel-box box2 carousel-item bg-primary shadow-sm rounded"> <img src="https://user-images.githubusercontent.com/78242022/282707987-d7bf8524-eb9c-441d-85e6-e53df7b4fa89.png" class="d-block w-100" alt="..."> </div> <div class="carousel-box box3 carousel-item bg-primary shadow-sm rounded"> <img src="https://user-images.githubusercontent.com/78242022/282707992-e7980555-a6b1-48f5-9416-079f9a7ca8fe.png" class="d-block" alt="..."> </div> <div class="carousel-box box4 carousel-item bg-primary shadow-sm rounded"> <img src="https://user-images.githubusercontent.com/78242022/282707999-8d9ee011-b0da-4512-9d46-42f5e774cf5d.png" class="d-block" alt="..."> </div> </section> </aside> </section> </main> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.0.2/dist/js/Bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
*,*::after,*::before { box-sizing: border-box; padding: 0; margin: 0; } main { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 100vh; } .carousel-btn { width: 40px; height: 40px; margin: 5px; cursor: pointer; } button { background: none; border: none; } button img { width: 100%; object-fit: contain; padding:0; } .carousel-box { width: 400px; height: 400px; margin: 5px; } .carousel-wrapper { display: flex; } .carousel { display: flex; } .carousel-box img { width: 100%; object-fit: contain; } @media screen and (max-width: 499px) { .carousel-box { width: 180px; height: 180px; margin: 5px; } } |
See the Pen
Bootstrap 5 Product review carousel by Ocxigin (@ocxigin)
on CodePen.
Flicker Image Carousel
Flicker image carousel is a type of carousel that adds quick fade in and fade out transition effects between two images as the user clicks through the carousel control buttons. This is very useful in cases where a series of images is made as a post, forming a carousel. The flicker effects can trigger smooth transitions as users navigate between image sliders.
Here, we used Bootstrap to create a flicker image carousel that fades in and out as users navigate the carousel sliders.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <main> <div id="carouselExampleFade" class="carousel slide carousel-fade"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://user-images.githubusercontent.com/78242022/284473812-eda73791-83d8-47db-bb4f-21de64621094.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/284473830-babc90af-7e73-4ee8-813b-7d87c4fae908.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://user-images.githubusercontent.com/78242022/284473823-1d713ee7-af6a-4913-b4e4-01d2d78c7e2d.jpg" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"> <i class="fa-solid fa-arrow-left"></i> <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"> <i class="fa-solid fa-arrow-right"></i> <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </main> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/js/Bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.carousel-inner { width: 100vw; height: 100vh; } .carousel-inner .carousel-item { width: 100%; height: 100%; } .carousel-inner .carousel-item img { width: 100%; height: 100%; object-fit: cover; } i { background-color: black; padding: 30px; border-radius: 100px; } |
See the Pen
Bootstrap Flicker image Carousel by Ocxigin (@ocxigin)
on CodePen.
Team Profile Dark Mode Carousel
Team profile carousels is yet another best Bootstrap carousel example that enables organizations to display the names, roles and sometimes social handles of their teams. This makes it easy for users or potential employees to know who to contact when seeking assistance in an organization.
Team profiles showcase the name and title of each team member, making them a great way to interact with other team members in the same role.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/css/Bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body class="text-bg-dark"> <main> <section> <div id="carouselExampleCaptions" class="carousel slide"> <section> <p>The Team</p> </section> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button> </div> <div class="carousel-inner"><!--The Carousel Container--> <div class="carousel-item active"><!--The Carousel Slider--> <aside class="card team1 text-bg-dark"> <img src="https://user-images.githubusercontent.com/78242022/283794686-a8370c0c-e16a-49d0-8461-35ec129ebcb3.jpg" alt=""> <h2 class="name">Tim Spence</h2> <p class="role">Head of Marketing</p> <p class="work-at">Markson Inc</p> </aside> </div> <div class="carousel-item"> <aside class="card team1 text-bg-dark"> <img src="https://user-images.githubusercontent.com/78242022/283794635-76fb11ee-73d7-4d46-a3f0-d80f0a2c9a9b.jpg" alt=""> <h2 class="name">Alan Shin</h2> <p class="role">Co-Founder</p> <p class="work-at">Duper Duper</p> </aside> </div> <div class="carousel-item"> <aside class="card team1 text-bg-dark"> <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt=""> <h2 class="name">Daniel Peng</h2> <p class="role">Head of Corporate</p> <p class="work-at">Development, MCX</p> </aside> </div> <div class="carousel-item"> <aside class="card team1 text-bg-dark"> <img src="https://user-images.githubusercontent.com/78242022/283794629-41fd9ca3-2483-4bb1-a040-d9b1b03434eb.jpg" alt=""> <h2 class="name">Brandy Ahn</h2> <p class="role">Overseas Sales</p> <p class="work-at">Newness Golf</p> </aside> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </section> </main> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/Bootstrap@5.3.2/dist/js/Bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
*,*::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } main { width: 100vw; height: 100vh; flex-direction: row; display: flex; justify-content: center; align-items: center; } #carouselExampleCaptions { width: 40vw; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #carouselExampleCaptions::before { width: 100%; height: 100%; content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 30%, black 100%); z-index: 1; mix-blend-mode: multiply; } #carouselExampleCaptions::after { width: 100%; height: 100%; content: ""; position: absolute; inset: 0; background: linear-gradient(-90deg, #fff 30%, black 100%); z-index: -1; mix-blend-mode: multiply; } .carousel-inner { width: 60%; } .card { width: 80%; height: 400px; border-radius: 10px; border: none; transition: filter 0.5s ease; } .card img { filter: grayscale(100%); width: 100%; height: 16em; object-fit: cover; object-position: 0% 20%; border-radius: inherit; } .card:hover img { filter: grayscale(0); } .card .name { font-size: 1.5em; font-weight: 900; text-transform: uppercase; margin: 0; text-align: center; } .card .role { font-size: 1.2em; margin: 0; text-align: center; } .card .work-at { font-size: 1em; text-align: center; } @media screen and (max-width: 900px){ #carouselExampleCaptions { width: 70vw; height: 70vw; } #carouselExampleCaptions::before { background: linear-gradient(90deg, #fff 60%, black 100%); } #carouselExampleCaptions::after { background: linear-gradient(-90deg, #fff 60%, black 100%); } .card img { width: 100%; height: 10em; } .card .name { margin-top: 1em; font-size: 1em; font-weight: 700; } .card .role { font-size: 0.8em; } .card .work-at { font-size: 0.6em; } } |
See the Pen
Bootstrap Team Profile Dark Mode by Ocxigin (@ocxigin)
on CodePen.
Team Profile Light Mode Carousel
Another latest Bootstrap carousel example is light mode carousel. For making a simplistic UI, this can be very useful in cases where we need to offer an alternative design outlook to dark mode.
Here is a simple and minimal light-mode team profile carousel effect with Bootstrap.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <main> <section> <div id="carouselExampleCaptions" class="carousel slide"> <section> <p>The Team</p> </section> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button> </div> <div class="carousel-inner"><!--The Carousel Container--> <div class="carousel-item active"><!--The Carousel Slider--> <aside class="card team1"> <img src="https://user-images.githubusercontent.com/78242022/283794558-047ca72b-9fe0-42f7-8d8e-09c77d48d3c0.jpg" alt=""> <h2 class="name">Tim Spence</h2> <p class="role">Head of Marketing</p> <p class="work-at">Markson Inc</p> </aside> </div> <div class="carousel-item"> <aside class="card team1"> <img src="https://user-images.githubusercontent.com/78242022/283794539-fc01d463-7bad-4887-a02a-2b9c3eed891f.jpg" alt=""> <h2 class="name">Alan Shin</h2> <p class="role">Co-Founder</p> <p class="work-at">Duper Duper</p> </aside> </div> <div class="carousel-item"> <aside class="card team1"> <img src="https://user-images.githubusercontent.com/78242022/283794643-4cea087e-3214-4331-84f8-fde21a8f22db.jpg" alt=""> <h2 class="name">Laurel Peng</h2> <p class="role">Head of Corporate</p> <p class="work-at">Development, MCX</p> </aside> </div> <div class="carousel-item"> <aside class="card team1"> <img src="https://user-images.githubusercontent.com/78242022/283794585-346ab892-20b2-45b5-9c70-5e99e149e65a.jpg" alt=""> <h2 class="name">Brandy Ahn</h2> <p class="role">Overseas Sales</p> <p class="work-at">Newness Golf</p> </aside> </div> <div class="carousel-item"> <aside class="card team1"> <img src="https://user-images.githubusercontent.com/78242022/283794595-9f1358ea-5af5-4b69-8295-bde8961fed84.jpg" alt=""> <h2 class="name">JoJo Kinis</h2> <p class="role">DevOps Engineer</p> <p class="work-at">Ylyeer</p> </aside> </div> <div class="carousel-item"> <aside class="card team1"> <img src="https://user-images.githubusercontent.com/78242022/242978218-d0e4eba2-62f7-4464-b2fb-c89835b6e592.jpg" alt=""> <h2 class="name">Alex Anie</h2> <p class="role">Fronted Developer</p> <p class="work-at">Freelancer</p> </aside> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <i class="fa-solid fa-arrow-left"></i> <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <i class="fa-solid fa-arrow-right"></i> <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </section> </main> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
*,*::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: rgb(241 245 249); } main { width: 100vw; height: 100vh; flex-direction: row; display: flex; justify-content: center; align-items: center; } #carouselExampleCaptions { width: 40vw; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .carousel-inner { width: 60%; } .card { width: 100%; height: 400px; border-radius: 10px; border: none; transition: filter 0.5s ease; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } .card img { filter: grayscale(100%); width: 100%; height: 16em; object-fit: cover; object-position: 0% 20%; border-radius: inherit; } .card:hover img { filter: grayscale(0); } .card .name { font-size: 1.5em; font-weight: 900; text-transform: uppercase; margin: 0; text-align: center; } .card .role { font-size: 1.2em; margin: 0; text-align: center; } .card .work-at { font-size: 1em; text-align: center; } i.fa-arrow-right, i.fa-arrow-left { background: orangered; padding: 10px; border-radius: 100%; } .carousel-indicators [data-bs-target] { background-color: orangered; width: 10px; height: 10px; border-radius: 100%; transition: opacity, width .6s ease; } .carousel-indicators .active { opacity: 1; width: 20px; } @media screen and (max-width: 900px){ #carouselExampleCaptions { width: 70vw; height: 70vh; } #carouselExampleCaptions::before { background: linear-gradient(90deg, #fff 60%, black 100%); } #carouselExampleCaptions::after { background: linear-gradient(-90deg, #fff 60%, black 100%); } .card img { width: 100%; height: 10em; } .card .name { margin-top: 1em; font-size: 1em; font-weight: 700; } .card .role { font-size: 0.8em; } .card .work-at { font-size: 0.6em; } } |
See the Pen
Bootstrap Team Profile Light Mode by Ocxigin (@ocxigin)
on CodePen.
Bootstrap Multi-Columns Carousel Products
At times, we might require carousels to be grouped into sections to help display similar projects, images, products, or members of a similar role in a single group. For this, we have another popular Bootstrap carousel example – a multi-column carousel.
This will help distinguish carousel sliders from other sliders, as each group will be in the same section and swipe together.
Here, we create a Bootstrap multi-column carousel slider. The first slider is a group of shoes, the second slider is a group of iPhone products, and the third section is a group of headsets. This makes it easy for users to navigate based on interest to decide what to buy from a website.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> </head> <body> <main> <section> <div id="carouselExampleCaptions" class="carousel slide"> <section> <p>Select from the product Catalogue</p> </section> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"><!--The Carousel Container--> <div class="carousel-item carousel-item-1 active"><!--The Carousel item 1--> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/unpaired-red-nike-sneaker-164_6wVEHfI" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">Nike</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$800.00</small> </div> </div> </div><!--[end of card]--> </div> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/white-adidas-low-top-sneakers-JM-qKEd1GMI" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">Adidas</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$600.00</small> </div> </div> </div><!--[end of card]--> </div> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/white-and-black-nike-air-force-1-low-XZ3EmAIWuz0" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">Slat Sole Show</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$500.00</small> </div> </div> </div><!--[end of card]--> </div> </div><!--[End of Carousel Item 1]--> </div> <!-- Carousel Item 2 --> <div class="carousel-item carousel-item-2"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/flatlay-photography-of-wireless-headphones-PDX_a_82obo" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">Black Glass Headset</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$200.00</small> </div> </div> </div><!--[end of card]--> </div> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/gray-and-brown-corded-headphones-GI6L2pkiZgQ" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">Nano Stripe Headset</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$300.00</small> </div> </div> </div><!--[end of card]--> </div> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/black-and-silver-sony-headphones-aiWjNA46Urc" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">Steelseries</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$500.00</small> </div> </div> </div><!--[end of card]--> </div> </div> </div> <!--[carousel-item-2]--> <!-- Carousel Item 3 --> <div class="carousel-item carousel-item-2"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/space-gray-iphone-x-with-box-K1MxhTd6SKo" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <p class="card-text">iPhone 15</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$2000.00</small> </div> </div> </div><!--[end of card]--> </div> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/silver-iphone-6-on-silver-macbook-gQ6NlDvRngU" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">iPhone 14 Pro Max</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$1500.00</small> </div> </div> </div><!--[end of card]--> </div> <div class="col"> <div class="card shadow-sm mx-8 my-5"> <small class="text-bg-warning px-5 rounded text-bg-light new">new</small> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <image href="https://source.unsplash.com/black-iphone-7-with-white-and-black-dice-YLNMXzXk8zs" height="100%" width="100%" /> </svg> <div class="card-body"> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-solid fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <i class="fa-regular fa-star text-warning"></i> <p class="card-text">iPhone 14</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-warning">View</button> <button type="button" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-cart-shopping"></i></button> </div> <small class="text-bg-warning px-2 rounded">$1200.00</small> </div> </div> </div><!--[end of card]--> </div> </div> </div> <!--[carousel-item-3]--> </div><!--[End of Container]--> <div class="control-btn"> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <i class="fa-solid fa-arrow-right"></i> <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span> <i class="fa-solid fa-arrow-left"></i> <span class="visually-hidden">Previous</span> </button> </div> </section> </main> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
*,*::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: rgb(241 245 249); } main { width: 100vw; height: 100vh; flex-direction: row; display: flex; justify-content: center; align-items: center; position: relative; } #carouselExampleCaptions { width: 80vw; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .carousel-inner { width: 100%; } .new { position: absolute; top: 10px; right: 10px; display: inline; } /* Controls */ i.fa-arrow-right, i.fa-arrow-left { background: none; border: 2px solid #ffc107; color: black; padding: 10px; border-radius: 100%; transition: background .6s ease; } .control-btn { position: absolute; top: -1em; right: 5em; } .carousel-item .card { height: 20em; height: fit-content; } .control-btn i.fa-arrow-left { position: absolute; right: 6em; } i.fa-arrow-right:hover, i.fa-arrow-left:hover { background: #ffc107; color: black; } .carousel-control-next { margin: 0 3em; } /* Indicators */ .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 100%; border: 2px solid #ffc107; } .carousel-indicators .active { opacity: 1; background-color: #ffc107; } @media screen and (max-width: 900px){ #carouselExampleCaptions { width: 70vw; height: 70vw; } .card img { width: 100%; } .card .name { margin-top: 1em; font-size: 1em; font-weight: 700; } .card .role { font-size: 0.8em; } .card .work-at { font-size: 0.6em; } } @media screen and (max-width: 576px) { #carouselExampleCaptions { width: 70vw; height: 70vh; } .carousel-item .card .card-body { position: absolute; bottom: 20px; left: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; } } |
See the Pen
Bootstrap 5 Multi-Column Carousel Products by Ocxigin (@ocxigin)
on CodePen.
Bootstrap Multi-Columns Team Carousel
Multi-columns carousel is not only limited to product items. We can also separate team members based on their roles. This makes it easy for other team members to know who they share similar roles with.
Here, we create a Bootstrap multi-columns carousel that group team members based on their roles. In this Bootstrap carousel example, the first slide shows team members with marketing roles, while the second shows team members with engineering roles.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> </head> <body class=""> <main> <section> <div id="carouselExampleCaptions" class="carousel slide"> <section> <p>MEET OUR TEAM</p> </section> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> </div> <div class="carousel-inner"><!--The Carousel Container--> <div class="carousel-item carousel-item-1 active"><!--The Carousel Slider--> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <aside class="card team1"> <img src="https://user-images.githubusercontent.com/78242022/283794670-008f009c-7a9c-41a0-a9bc-38826bfbe9f1.jpg" alt=""> <div class="caption"> <h2 class="name">Tim Spence</h2> <p class="role">Head of Marketing</p> <p class="work-at">Markson Inc</p> </div> </aside> </div> <div class="col"> <aside class="card team2"> <img src="https://user-images.githubusercontent.com/78242022/283794663-5447181d-8621-4a1d-8b4f-15a10917be12.jpg" alt=""> <div class="caption"> <h2 class="name">Alan Shin</h2> <p class="role">Co-Founder</p> <p class="work-at">Duper Duper</p> </div> </aside> </div> <div class="col"> <aside class="col card team3 "> <img src="https://user-images.githubusercontent.com/78242022/283794643-4cea087e-3214-4331-84f8-fde21a8f22db.jpg" alt=""> <div class="caption"> <h2 class="name">Laurel Peng</h2> <p class="role">Head of Corporate</p> <p class="work-at">Development, MCX</p> </div> </aside> </div> </div> </div> <div class="carousel-item carousel-item-2"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <aside class="card team4"> <img src="https://user-images.githubusercontent.com/78242022/283794606-8b10b1c2-16e0-431d-88ca-3d6c9fca4839.jpg" alt=""> <div class="caption"> <h2 class="name">Alex Kovosksky</h2> <p class="role">Overseas Sales</p> <p class="work-at">Newness Golf</p> </div> </aside> </div> <div class="col"> <aside class="card team5"> <img src="https://user-images.githubusercontent.com/78242022/283794595-9f1358ea-5af5-4b69-8295-bde8961fed84.jpg" alt=""> <div class="caption"> <h2 class="name">JoJo Kinis</h2> <p class="role">DevOps Engineer</p> <p class="work-at">Ylyeer</p> </div> </aside> </div> <div class="col"> <aside class="card team6"> <img src="https://user-images.githubusercontent.com/78242022/283794700-f2f6cadc-0652-4f82-a77a-5bd8286fec42.jpg" alt=""> <div class="caption"> <h2 class="name">Violet Dynk</h2> <p class="role">Content Writer</p> <p class="work-at">GreenShock</p> </div> </aside> </div> </div> </div> </div> <div class="control-btn"> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <i class="fa-solid fa-arrow-right"></i> <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span> <i class="fa-solid fa-arrow-left"></i> <span class="visually-hidden">Previous</span> </button> </div> </section> </main> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
*,*::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: rgb(241 245 249); } main { width: 100vw; height: 100vh; flex-direction: row; display: flex; justify-content: center; align-items: center; position: relative; } #carouselExampleCaptions { width: 80vw; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .carousel-inner { width: 100%; } .card { width: 100%; height: 400px; border-radius: 10px; border: none; transition: filter 0.5s ease; background: none; } .card img { width: 100%; height: 16em; object-fit: cover; object-position: 0% 20%; border-radius: inherit; } .card .name { font-size: 1.5em; font-weight: 500; text-transform: uppercase; margin-top: 10px; } .card .role { font-size: 1.2em; margin: 0; } .card .work-at { font-size: 1em; } /* Controls */ i.fa-arrow-right, i.fa-arrow-left { background: none; border: 2px solid rgb(110, 6, 110); color: rgb(110, 6, 110); padding: 10px; border-radius: 100%; transition: background .6s ease; } i.fa-arrow-right:hover, i.fa-arrow-left:hover { background: rgb(110, 6, 110); color: white; } .carousel-control-next { margin: 0 3em; } .control-btn { position: absolute; top: -1em; right: 5em; } .control-btn i.fa-arrow-left { position: absolute; right: 6em; } /* Indicators */ .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 100%; border: 2px solid rgb(110, 6, 110); } .carousel-indicators .active { opacity: 1; background-color: rgb(110, 6, 110) } @media screen and (max-width: 900px){ #carouselExampleCaptions { width: 70vw; height: 70vw; } .card img { width: 100%; height: 10em; } .card .name { margin-top: 1em; font-size: 1em; font-weight: 700; } .card .role { font-size: 0.8em; } .card .work-at { font-size: 0.6em; } } @media screen and (max-width: 576px) { .carousel-item .card .caption { position: absolute; top: 20px; left: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; padding: 10px; } } |
See the Pen
Bootstrap Multi-Columns Carousel Teams by Ocxigin (@ocxigin)
on CodePen.
Side Nav Testimonial Carousel
Testimonials are a great way to showcase product reviews from existing users. This helps to instill confidence and trust in new users. With a side nav carousel, we can display users testimonials alongside a product caption. This latest Bootstrap carousel example will help users get a feel of what the products are about and at the same time read testimonials from existing users.
We use Bootstrap 5 to create a side nav carousel that displays the product caption and testimonial from existing users, as shown from the screenshot above.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> </head> <body> <main> <!-- <section class="testimonial-hero"> --> <div class="container-xxl py-5"> <div class="container py-5"> <div class="testimonial-text g-5"> <div class="wow fadeIn" data-wow-delay="0.1s"> <button class="btn btn-sm border rounded-pill text-primary px-3 mb-3">Testimonial</button> <h1 class="mb-4">LambdaTest Reviews</h1> <p class="mb-4">Our Unified Testing Cloud enables you to deliver world class digital experience with quality releases and help accelerate your release velocity.</p> <a class="btn btn-primary rounded-pill px-4" href="https://www.lambdatest.com/reviews">Contact Sales</a> </div> <!-- </section>End of Testimonial Here --> <section class="carousel-landmark wow fadeIn" data-wow-delay="0.5s"> <div id="carouselExampleCaptions" class="carousel slide testimonial-carousel border-start border-primary"> <!-- <section> <div class="control-bar"></div> </section> --> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"><!--The Carousel Container--> <div class="carousel-item carousel-item-1 active"><!--The Carousel item 1--> <div class="testimonial-item ps-5"> <i class="fa fa-quote-left fa-2x text-primary mb-3"></i> <p class="fs-4 textimal-text">Super top notch customer support from <em>@lambdatesting</em> - just throwing it out there if you're looking for a decent browser testing platform, they get my full double thumbs up. Thumbs upThumbs up</p> <div class="d-flex align-items-center"> <img class="img-fluid flex-shrink-0 rounded-circle" src="https://user-images.githubusercontent.com/78242022/266013790-4d674d96-a311-47c3-9b7c-03feaa36c948.png" style="width: 60px; height: 60px;"> <div class="ps-3"> <h5 class="mb-1">Ben Pritchard</h5> <span class="at">@yesiamben</span> </div> </div> </div> </div> <!-- Carousel Item 2 --> <div class="carousel-item carousel-item-2"> <div class="testimonial-item ps-5"> <i class="fa fa-quote-left fa-2x text-primary mb-3"></i> <p class="fs-4 textimal-text"><em>@lambdatesting</em> is fantastic. Cross browser and device testingtesting frustration is minimized. You can't get rid of clients that need ie11 nor can you own every device but lambda test bridge that gap.</p> <div class="d-flex align-items-center"> &nbs |