Topic: Multiple Carousels on Same Page
I have two different types of carousel on my home page, one for the head and another further down which is the multi item version.
They both work, but the multi item version displays the image of the main carousel, in the background, on transition.
They have different IDs so I don't know why this is happening, can you provide me a solution to fix this please?
http://richmondapps.com/protatech/WoodsideRanch/index3.html#/multi-item-example
Add comment
Excellent, thank you, I thought it was something along those lines but apparently I changed everything but your suggestion!
That's probably because you set a background to the carousel-item via CSS and both carousels include "carousel-item" element.
.carousel-item:nth-child(1) {
background-image: url("http://richmondapps.com/protatech/WoodsideRanch/_img/_carousel_main/9.6.jpg");
background-repeat: no-repeat;
background-size: cover;
}#home-page-main-carousel .carousel-item:nth-child(1) {
background-image: url("http://richmondapps.com/protatech/WoodsideRanch/_img/_carousel_main/9.6.jpg");
background-repeat: no-repeat;
background-size: cover;
}FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No