Как я могу установить все изображения разной высоты и ширины в сцене сова карусель - PullRequest
Новая
       64

Как я могу установить все изображения разной высоты и ширины в сцене сова карусель

1 голос
/ 17 марта 2020

как я могу настроить отзывчивую карусель, используя совую карусель, мне нужно1, чтобы просмотреть изображения разных размеров в одном кадре, как это, enter image description here

enter image description here

enter image description here

Мне нужно сделать это с помощью карусели сов, но она работает так, помогите мне

enter image description here

я попробовал вот так с совой-каруселью (результат - последняя картинка вопроса) 

<div class="col-lg-6 mb-4 mb-lg-0">
<div class="product-slider position-relative bg-600">
    <div class="owl-carousel owl-theme position-lg-absolute l-0 t-0 h-100 product-images  owl-loaded owl-drag" data-owl-carousel-controller=".product-thumbs" data-options='{"items":1,"nav":true,"dots":false,"slideBy":1,"autoplay":true}'>

            <div class="item h-100"><a href="../assets/testpics/338416-1cLigl1425730821.jpg" data-fancybox="gallery" ><img class="rounded h-lg-auto fit-cover" src="../assets/testpics/338416-1cLigl1425730821.jpg" alt=""></a></div>
            <div class="item h-100"><a href="../assets/testpics/1657550.jpg" data-fancybox="gallery" ><img class="rounded h-lg-auto fit-cover" src="../assets/testpics/1657550.jpg" alt=""></a></div>
            <div class="item h-100"><a href="../assets/testpics/1.jpg" data-fancybox="gallery" ><img class="rounded h-lg-auto fit-cover" src="../assets/testpics/1.jpg" alt=""></a></div>
            <div class="item h-100"><a href="../assets/testpics/2.jpg" data-fancybox="gallery" ><img class="rounded h-lg-auto fit-cover" src="../assets/testpics/2.jpg" alt=""></a></div>
            <div class="item h-100"><a href="../assets/testpics/bride.jpg" data-fancybox="gallery" ><img class="rounded h-lg-auto fit-cover" src="../assets/testpics/bride.jpg" alt=""></a></div>
    </div>
</div>
<div class="owl-carousel owl-theme mt-1 product-thumbs owl-loaded " data-options='{"items":5,"nav":true,"mouseDrag":false,"dots":false,"slideBy":1,"margin":4}'>
            <div class="item"><img class="rounded h-auto" src="../assets/testpics/270cproacc.png" alt=""></div>
            <div class="item"><img class="rounded h-auto" src="../assets/testpics/338416-1cLigl1425730821.jpg" alt=""></div>
            <div class="item"><img class="rounded h-auto" src="../assets/testpics/1657550.jpg" alt=""></div>
            <div class="item"><img class="rounded h-auto" src="../assets/testpics/1.jpg" alt=""></div>
            <div class="item"><img class="rounded h-auto" src="../assets/testpics/2.jpg" alt=""></div>
            <div class="item"><img class="rounded h-auto" src="../assets/testpics/bride.jpg" alt=""></div>

</div>

...