我的问题是我有多个触发不同轮播的图标。默认情况下,第一个轮播可见,其余的隐藏。这些是图标(在我的情况下是织物色板):

<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的包装器元素中;和溢出隐藏;要将其切换到可见的设置高度:auto;

10-06 05:04
查看更多