刷新猫头鹰轮播 2 宽度

Refresh owlCarousel 2 Width

本文关键字：宽度 猫头鹰 刷新      更新时间：2023-09-26

我的问题是我有多个图标触发不同的轮播。默认情况下，第一个轮播是可见的，其余轮播是隐藏的。以下是图标（在我的情况下是织物色板）：

<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事件？

不要隐藏，而是将轮播放在高度为 0 的包装器元素中; 并隐藏溢出;要将其切换到可见的设置高度：自动;

相关文章：