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;

刷新owlCarousel 2宽度

1 个答案: