Carousel is the website component that makes the images/text and content move like a slideshow. It creates an effect like a carousel.
The carousel slider is a slideshow component made with CSS and JS library. It is a sliding content or image that moves left or right, as per the arrow clicked. The carousels available in Bootstrap Rev are made to give an eye-catching effect to your website. It is available both automatic and manual. Choose the one as per your need.
Note The classes are given in this section need to be added in parent div of the slider. To make the bootstrap rev carousel run smoothly.
Getting a little blackish effect over the slider image will make it more dynamic. Using the carousel-content-overlay class in the parent div to get this effect.
Add carousel-content-overlay class in main/parent div of carousel.
<div id="carouselOne" class="carousel-content-overlay" data-bs-ride="carousel">
How about getting an overlay as per your website main/primary color, sounds good? Use the overlay-theme class to get the theme's primary color slightly transparent layer on the image of the carousel.
Add overlay-theme class in main div of carousel to Theme colored overlay on the image.
<div id="carouselOne" class="overlay-theme" data-bs-ride="carousel">
On the off chance that you need the overlay of the gradient tone on the picture then use the overlay-theme-gradient class. The gradient color is the subject shading you pick in the Customization segment under the :root variable. It will be the color one chose in hex or rgb color code.
Note: The gradient is set to 45deg by default.
Add overlay-theme-gradient class in the main div of the carousel. The user will get a gradient-colored overlay.
<div id="carouselOne" class="overlay-theme-gradient" data-bs-ride="carousel">
Customize the carousel by giving it a height. Use the carousel-min-5, carousel-min-6, carousel-min-7 class to change the height of the carousel. There are three fixed heights. These are 500px, 600px, and 700px. One can likewise get the full height as per the screen size using the carousel-full-height class. The carousel will fit altogether to the screen, whatever its size be.
Carousel Min Height: Add carousel-min-5 class in the main ul of the carousel to have a 500px min-height of the Carousel.
Carousel Min Height: Add carousel-min-6 class in the main div of the carousel to have a 600px min-height of the Carousel.
Carousel Min Height: Add carousel-min-7 class in the main div of the carousel to have a 700px min-height of the Carousel.
Carousel Full- Height (vh): Add carousel-full-height class in the main div of the carousel to have 100% height of the Carousel.
<div id="carouselOne" class="carousel-min-5" data-bs-ride="carousel">
<div id="carouselOne" class="carousel-min-6" data-bs-ride="carousel">
<div id="carouselOne" class="carousel-min-7" data-bs-ride="carousel">
<div id="carouselOne" class="carousel-full-height" data-bs-ride="carousel">
In websites, by default, the content aligns vertically at the bottom of the carousel. Use the content-align-middle class to get the content at the middle of the carousel. The user can also change the alignment of the content in the next steps.
Add content-align-middle class in the main div of the carousel to align the content in the middle of the Carousel.
<div id="carouselOne" class="content-align-middle" data-bs-ride="carousel">
The designer can align the content on the slideshow at their convenience. They can either align it left, right or center. Use the text-center class to align the text in the center, content-right class to align on the right side, and content-left class align the content on the left side.
Content alignment center: Add text-center class in caption-inner div of carousel.
Content alignment right: Add content-right class in caption-wrapper div of carousel.
Content alignment left: Add text-left class in caption-wrapper div of carousel.
<div class="caption-inner text-center">
<div class="caption-wrapper content-right">
<div class="caption-wrapper content-left">
In this section of the carousel, the image in the slide will remain fixed. The user can use content or text to overlay and display. Use the slides-fixed class to get such parallex an effect.
Add slides-fixed class in the main div of carousel.
<div id="carouselOne" class="slides-fixed" data-bs-ride="carousel">
Here are some of the examples of the carousel bootstrap. The designers can copy the code and use it. They can also add some other detailing in the code to make the slider look more attractive. Even they can change the images/content and other details of the carousel.
Adding carousels to websites is a trend nowadays. It gives a beautiful effect with the movement of content, images, etc., in a merry-go-round manner. In this section, you will find pre-built carousels for designing your site. Just copy the code with the Copy button at the top right corner of the screen. Paste it to your code section. Cheers! You are all set to go.
Here, the user can copy the code and get a slider with a slight blackish effect around it. It is an automatic slider. Besides, the user can increase or decrease the number of slides.
<div id="carouselOne" class="carousel slide carousel-min-5 carousel-content-overlay" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselOne" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselOne" data-bs-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background: url(https://bootstraprev.com/img/slide1.jpg);">
<div class="caption-wrapper">
<div class="container text-center">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background: url(https://bootstraprev.com/img/slide2.jpg);">
<div class="caption-wrapper">
<div class="container text-center">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselOne" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
In the above section, we used a class slides-fixed to get the background image fixed. As you navigate up and down the screen, you will find a fixed slider. It is one of the favorite effects of the new era designers. Check it out yourself.
<div id="carouselTwo" class="carousel slide carousel-min-5 carousel-content-overlay slides-fixed" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselTwo" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselTwo" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselTwo" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background: url(https://bootstraprev.com/img/slide1.jpg);">
<div class="caption-wrapper">
<div class="container text-center">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background: url(https://bootstraprev.com/img/slide2.jpg);">
<div class="caption-wrapper">
<div class="container text-center">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background: url(https://bootstraprev.com/img/slide3.jpg);">
<div class="caption-wrapper">
<div class="container text-center">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselTwo" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselTwo" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
When we put our content over the carousel, we will find it appearing vertically at the bottom. However, it is mentioned in the above section that alignment of content can be in either left, right, or center. Here is an example of a carousel with the fixed background using slides-fixed class and left-aligned content using content-left.
<div id="carouselThree" class="carousel slide carousel-min-5 carousel-content slides-fixed content-left" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselThree" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselThree" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselThree" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background: url(https://bootstraprev.com/img/slide1.jpg);">
<div class="caption-wrapper">
<div class="container text-left">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background: url(https://bootstraprev.com/img/slide2.jpg);">
<div class="caption-wrapper">
<div class="container text-left">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background: url(https://bootstraprev.com/img/slide3.jpg);">
<div class="caption-wrapper">
<div class="container text-left">
<div class="caption-inner">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselThree" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselThree" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
If you use content-left class, content-right class, or text-center class, you will find the content aligned as per the class used. How about arranging the content over the slider in a random alignment? Isn’t it a great and creative idea? Here is an example of such a slider where the content-align-middle class is used. By using it, the content is aligned vertically in the middle of the slide.
<div id="carouselFour" class="carousel slide carousel-min-5 carousel-content" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselFour" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselFour" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselFour" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background: url(https://bootstraprev.com/img/slide4.jpg);">
<div class="caption-wrapper content-right">
<div class="container text-right">
<div class="caption-inner color-dark">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background: url(https://bootstraprev.com/img/slide6.jpg);">
<div class="caption-wrapper content-left">
<div class="container text-left">
<div class="caption-inner color-dark">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background: url(https://bootstraprev.com/img/slide5.jpg);">
<div class="caption-wrapper content-right">
<div class="container text-right">
<div class="caption-inner color-dark">
<h1 class="mb-4">
Lorem ipsum dolor sit amet consectetur
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sed amet iste cupiditate totam beatae itaque maiores obcaecati consectetur, fugiat reiciendis. Molestiae, doloremque veniam numquam incidunt.
</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselFour" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselFour" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
In the product slider, one can use images, content, icons, buttons, and links. It will display in 4x4 slides. The arrow on both sides will move the slider left and right. Use the product-slider class in the code. Just copy the code and modify it as per convenience.
<div id="carouselcardone" class="carousel slide product-slider" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://bootstraprev.com/img/blog/blog1.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselcardone" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselcardone" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Whenever you check the paid slider section, you will get attracted by this slider. It is a slider where the first half is the image section while the other half is the content. Moving the arrow will change the content. Moreover, the image will fade in and fade-out. Bootstrap Rev is providing this premium carousel for free.
Since it is not made purely in CSS, you also need a JS plugin to activate it. You can either add the JS file’s CDN or paste the given few lines of JS code in the JS file or the footer section.
Just add small js code in your js file or in footer
<script>
$('.next').on('click', function(e) {
e.preventDefault()
$('.carouselmix2').carousel('next')
})
$('.previous').on('click', function(e) {
e.preventDefault()
$('.carouselmix2').carousel('prev')
})
</script>
<div class="two-slide-wrapper container">
<div class="row align-items-center">
<div class="col-md-6">
<div id="carouselmix2" class="carousel carouselmix2 carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://bootstraprev.com/img/slide5.jpg" alt="" class="img-fluid">
</div>
<div class="carousel-item">
<img src="https://bootstraprev.com/img/slide6.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id="carouselmix2" class="carousel carouselmix2 slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora quo expedita nulla animi, ut quisquam maxime doloribus mollitia odit provident, dicta. Labore distinctio repudiandae, odio in voluptatem velit libero eaque.
</div>
<div class="carousel-item">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora quo expedita nulla animi, ut quisquam maxime doloribus mollitia odit provident, dicta. Labore distinctio repudiandae, odio in voluptatem velit libero eaque.
</div>
</div>
</div>
</div>
</div>
<a class="next"><i class="bi bi-chevron-right"></i></a>
<a class="previous"><i class="bi bi-chevron-left"></i></a>
</div>