How to create Bootstrap modal carousel: 4 online demos
The modal carousel
In their respective tutorials, I explained how you can create modals and carousels by using the built-in components of Bootstrap framework.
In certain scenarios, you may need a modal window that dims the underlying content and yet enable us behaving like a carousel i.e. 2, 3 or more sliding images, videos etc with information or captions.
In this tutorial, I will show you creating modal carousels by using Bootstrap framework.
A demo of using carousel component inside modal
The idea is to create a modal dialog first by using built-in Bootstrap classes. Inside the modal markup, rather than using the simple modal code, we can place carousel component with the required number of sliding images or videos etc.
See a demonstration and I will explain section by section how it is being done:
See online demo and code
In the demo, you can see a modal carousel with three sliding images that also include controls to move next and previous slides.
So how it is done? First of all, the markup for modal is written:
|
1 2 3 4 5 |
<div class="modal fade" id="ModalCarousel" tabindex="-1" role="dialog" aria-labelledby="ModalCarouselLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> |
This is just like simple demos that I explained in the modal plug-in tutorial.
Inside the modal-content div, the code for carousel component is written:
|
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 |
<div id="carousel-modal-demo" class="carousel slide" data-ride="carousel"> <!-- Sliding images starting here --> <div class="carousel-inner"> <div class="item"> <img src="images/banana.jpg" alt="banana"> </div> <div class="item"> <img src="images/currant.jpg" alt="currant"> </div> <div class="item"> <img src="images/mango.jpg" alt="mango"> </div> <div class="item active"> <img src="images/strawberries.jpg" alt="strawberries"> </div> </div> |
Finally, the controls for moving the slides next/previous are given. You can see the complete code in the demo page.
A demo of modal carousel with captions
As such, the content area of modal allows you to write the variety of code for the carousel. You may use multiple images or present information by using carousel classes with HTML tags.
See this example, where text information is given along with sliding images:
See online demo and code
In the demo, you can see the sliding images with caption and other information as well. Apart from that, the carousel indicators are also added:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-modal-demo" data-slide-to="0" class="active"></li> <li data-target="#carousel-modal-demo" data-slide-to="1"></li> <li data-target="#carousel-modal-demo" data-slide-to="2"></li> <li data-target="#carousel-modal-demo" data-slide-to="3"></li> </ol> |
Adding more controls in modal-carousel example
You may also use the modal related classes before or after using the carousel classes. So, adding the header or footer section by using Bootstrap’s built-in modal-header and modal-footer classes.
See the following example, where I added the header and footer in the above example. The header contains just text information while footer is given a few built-in buttons for the sake of demonstration.
See online demo and code
In the code section of the demo, you can see the carousel code is placed between the header and footer of the modal component. So you may get the benefit of both components to accomplish the certain task.
An example of multi-item modal carousel
In this demo, multiple sliding images are visible at a time in the modal carousel. See the demo and code online:
See online demo and code
To ensure carousel is responsive, the CSS code is used along with managing in <script> section. This is explained in the carousel component tutorial.