Topic: Multiple Carousels on Same Page

garland.jake pro asked 7 years ago


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

garland.jake pro answered 7 years ago


Excellent, thank you, I thought it was something along those lines but apparently I changed everything but your suggestion!

Michal Szymanski staff answered 7 years ago


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;
}
Change each code according to the example below and let me know if it solves your problem.
#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;
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No