Multiple Carousels on Same Page

Topic: Multiple Carousels on Same Page

garland.jake pro asked 10 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

Add comment

Michal Szymanski staff pro premium priority answered 10 years ago

0 0 Best answer

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;
}

Add comment

garland.jake pro answered 10 years ago

0 0 Best answer

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

Add comment