CODEWITHSUNDEEP
javascriptjqueryowl-carousel
Liam McArthur
Liam McArthur

Reputation: 1033

Refresh owlCarousel 2 Width

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?

Upvotes: 1

Views: 1208

Answers (1)

seahorsepip
seahorsepip

Reputation: 4819

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

Upvotes: 1

Related Questions