Обновить owlCarousel 2 Width

Question

Моя проблема в том, что у меня есть несколько значков, которые запускают различные карусели. По умолчанию первая карусель видна, а остальные скрыты. Вот иконки (образцы тканей, в моем случае):

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

и здесь мои каруселей:

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

и мой 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 
    }) 
}); 

При нажатии на вторую позицию, он загружает вторую карусель, но width кажется огромным. 1260px в моем случае. Я понимаю, что это, вероятно, вызвано тем, что браузер не знает width, а вторая карусель настроена так, чтобы отображать его? Есть ли способ, который я могу вызвать обновление на событии click одного из моих значков?

Answer 1

Вместо укрытия положить карусель внутри оберточного элемента с высотой: 0; и переполнение скрыто; Чтобы переключить его на видимую высоту набора: auto;