JQuery Cycle2 Transition Карусель слайдов не одинакового размера - PullRequest
Новая
       32

JQuery Cycle2 Transition Карусель слайдов не одинакового размера

0 голосов
/ 12 февраля 2019

На моей странице есть карусель JQuery Cycle2 Transition с загрузочными картами.Я удалил все размеры с карт, но это привело к странному переполнению: https://imgur.com/C8HdOr8 (может быть трудно увидеть).Для меня документация слишком расплывчата, чтобы найти исправление, я надеюсь, что сообщество StackOverflow может мне помочь.: 

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

Итак, что я пытаюсь достичь, так этослайды одинаковой ширины.Кто-нибудь знает, как это сделать?

...