CODEWITHSUNDEEP
jquerytwitter-bootstrapowl-carousel
Boris Kamp
Boris Kamp

Reputation: 51

Owl Carousel issue with Bootstrap tabs

Im almost done with creating a neat user profile page where users can watch their profile. Im working with the Bootstrap framework integrated in Wordpress. Im using Bootstrap's Tabs in order to get a lot of info on one but and keep it clear for the user. I have two main tabs, called "AWF I" and "AWF II", inside those tabs I have info about the fund, and a Owl Carousel to display pictures The AWF I tab is active here As you can see the carousel works great, but when I activate tab "AWF II" I get this: The AWF II tab is active here As you can see, the pictures / carousel itself are super small, and I have no idea how to overcome this, the carousel should display like the one in the "AWF I" tab. Here is a clue that might give you guys some idea on why this is happening: when I rightclick and inspect the element in Google Chrome, the carousel pops to the correct size like it should be: The correct display should be this but when I switch back to "AWF I" after, that carousel displays the small images, so basically, inspecting with Google Chrome makes them switch role.

Any clue on this? please let me know if you need more info! Thanks!

UPDATE 01

Here is the code I use to call the carousel:

$(document).ready(function(){

$("#owl-awf1-properties,#owl-awf2-properties").owlCarousel({
    pagination: true,
    loop: true,
    dots: false,
    autoplay: true,
    autoplayTimeout:2000,
    autoplayHoverPause:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:  {
            items:2
        },
        450:{
            items:3
        },
        767:{
            items:4
        },
        991:{
            items:5
        },
        1199:{
            items:5
        }
    }
});

});

Upvotes: 1

Views: 7149

Answers (1)

Boris Kamp
Boris Kamp

Reputation: 51

@Jason Anello, A mod at www.teamtreehouse.com solved this issue by suggesting to switch from the Owl Carousel 2 to the Older but more stable Owl Carousel 1! I changed my css and js files from version 2 to version 1 and now the carousels load like they should! Thanks Jason!!

Thanks Christina for trying to help as well!

Upvotes: 2

Related Questions