Refresh owlCarousel 2 Width

Question

My problem is that I have multiple icons that trigger different carousels. By default, the first carousel is visible and the rest are hidden. Here are the icons (fabric swatches, in my case):

<div id="home" class="fabrics">
    <h2>Fabrics Available</h2>
    <a class="charcoal" href="javascript:void(0)">
        <div class="magnify-3">
            <div class="large-zoom-3"></div>
            <img class="small-zoom-3" src="<?php echo $this->getSkinUrl('images/recliners/fabrics/charcoal.png');?>" alt="Charcoal" />
        </div>
    </a>
    <a class="mushroom" href="javascript:void(0)">
        <div class="magnify-2">
            <div class="large-zoom-2"></div>
            <img class="small-zoom-2" src="<?php echo $this->getSkinUrl('images/recliners/fabrics/mushroom.png');?>" alt="Mushroom" />
        </div>
    </a>
</div>

and here are my carousels:

<div class="imgs slider charcoal">
    <img src="<?php echo $this->getSkinUrl('images/recliners/indiana/charcoal-1.png');?>" alt="Charcoal" />
    <img src="<?php echo $this->getSkinUrl('images/recliners/indiana/charcoal-2.png');?>" alt="Charcoal" />
    <img src="<?php echo $this->getSkinUrl('images/recliners/indiana/charcoal-3.png');?>" alt="Charcoal" />
</div>
<div class="imgs slider mushroom" style="display:none">
    <img src="<?php echo $this->getSkinUrl('images/recliners/indiana/mushroom-1.png');?>" alt="Mushroom" />
    <img src="<?php echo $this->getSkinUrl('images/recliners/indiana/mushroom-2.png');?>" alt="Mushroom" />
    <img src="<?php echo $this->getSkinUrl('images/recliners/indiana/mushroom-3.png');?>" alt="Mushroom" />
</div>

and my Javascript:

jQuery(document).ready(function() {
    jQuery(".fabrics a").click(function() {
        var e = jQuery(this).attr("class");
        jQuery(".imgs").hide(), jQuery(".imgs." + e).toggle();
    })
}),
jQuery(document).ready(function() {
    jQuery(".slider").owlCarousel({
        loop: !0,
        autoplay: !0,
        autoplayTimeout: 3e3,
        autoplayHoverPause: !0,
        items: 1,
        animateIn: "fadeIn",
        animateOut: "fadeOut",
        navigation: !0
    })
});

When clicking the second item, it does load the second carousel, but the width seems to be huge. 1260px in my case. I understand this is probably caused because the browser doesn't know the width with the second carousel being set to display none? Is there a way I can trigger a refresh on the click event of one of my icons?

Possible duplicate of [How to re-render a owl-carousel item?](http://stackoverflow.com/questions/27947789/how-to-re-render-a-owl-carousel-item) — Mosh Feu, Feb 11 '16 at 11:30
Instead of hiding put the carousel inside a wrapper element with height: 0; and overflow hidden; To toggle it to visible set height: auto; — seahorsepip, Feb 11 '16 at 12:09

score 1 · Accepted Answer · answered Feb 11 '16 at 12:10

1

Instead of hiding put the carousel inside a wrapper element with height: 0; and overflow hidden; To toggle it to visible set height: auto;

answered Feb 11 '16 at 12:10

seahorsepip

4,519
1
19
30

Great idea actually! The only problem with this is that my website is responsive, so the height could change. Instead, I used jCycle - which had no problems handling what I needed it to do! – Liam McArthur Feb 11 '16 at 21:44
Height should matter since it uses auto as height value to show and 0 as height value to hide. – seahorsepip Feb 12 '16 at 01:50

Refresh owlCarousel 2 Width

1 Answers1