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>