Question

我的页面上有一个带有自举卡的JQuery Cycle2 Transition Carousel。我从卡上删除了所有大小调整，但是这导致了奇怪的溢出：https://imgur.com/C8HdOr8（可能很难看到）。对我来说，文档太含糊，无法找到修复程序，我希望StackOverflow社区可以为我提供帮助。

循环文档：http://jquery.malsup.com/cycle2/demo/carousel.php

这是html代码（混入了Cycle）：

<div class="row carousel-container slideshow" style="position: relative; overflow: hidden;">

<!-- This div is repeated multiple types with other values A.K.A a slide -->
<div class="shop-product-listview-item cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden; height: auto;">
    <div class="shop-product-listview-item-inner" style="visibility: hidden;">
        <div class="shop-product-listview-item-image" style="visibility: hidden;">
            <a href="http://127.0.0.1/luxe-uitvaartkisten.nl/assortiment/4/alu-elite-silver.html" style="visibility: hidden;">
                <img src="images/scale/04_20190201203913.jpg?path=upload/webwinkel/&amp;width=220&amp;height=146&amp;type=scalecropped&amp;r=255&amp;g=255&amp;b=255" alt="Alu Elite Silver" class="responsiveimg" style="visibility: hidden;">
            </a>
        </div>
        <div class="shop-product-listview-item-info" style="visibility: hidden;">
            <h2 style="visibility: hidden;">
                <a href="http://127.0.0.1/luxe-uitvaartkisten.nl/assortiment/4/alu-elite-silver.html" style="visibility: hidden;">Alu Elite Silver</a>
            </h2>
            <div class="shop-product-listview-item-description" style="visibility: hidden;">
                <p style="visibility: hidden;">Alu Elite Silver</p>
            </div>
            <div class="shop-product-listview-item-price" style="visibility: hidden;">
                <p class="shop-product-prijs-prijs" style="visibility: hidden;">€ 3.500,00</p>
            </div>
            <div class="shop-product-listview-item-btn" style="visibility: hidden;">
                <a href="http://127.0.0.1/luxe-uitvaartkisten.nl/assortiment/4/alu-elite-silver.html" class="btn btn-basic" style="visibility: hidden;">BEKIJKEN</a>
            </div>
        </div>
    </div>
</div>

<a href="#" id="prev"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></a>
<a href="#" id="next"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>

这是JS代码

$('.carousel-container').cycle({
        timeout: 1000,
        paused: true,
        slides: '.shop-product-listview-item',
        fx: 'carousel',
        next: '#next',
        prev: '#prev',
        fluid: true,
        visible: 3,
        carouselOffset: 15, 
    });

和CSS

.carousel-container #prev, #next
{
    font-size: 72px;
    z-index: 9999;
    overflow: visible;
}

.carousel-container #prev
{
    position: absolute;
    top: 50%;
    left: 5px;
}

.carousel-container #next
{
    position: absolute;
    top: 50%;
    right: 5px;
}

所以我想要实现的是幻灯片的宽度相同。有人知道该怎么做吗？

JQuery Cycle2 Transition Carousel幻灯片的大小不相等

0 个答案: