Проблема в том, что когда мы изменяем размеры карт, они либо нарушают заполнение, либо нарушают бесконечный свиток, либо оба.
Пожалуйста, см. Этот пост Reddit для более подробной информации: https://www.reddit.com/r/bootstrap/comments/bxokxh/modifying_the_owl_carousel/
Мы попытались изменить исходную заливку (количество пикселей) и изменить объект HTML с CSS. В обоих случаях отступ и бесконечная прокрутка нарушены.
<section id="section-8">
<h2 class="section-title">Find a Ranking <a data-scroll href="#section-7" class="anchor" data-toggle="tooltip" data-placement="top" title="Copy URL"></a></h2>
<p>Enter a hand and we will return its ranking.</p>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header no-border bg-white pb-0">
<div class="card-body">
<div class="row" id="append">
</div>
<br>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='WTF' id='1' onClick="print_id(1)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_clubs.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='5' onClick="print_id(5)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_clubs.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='9' onClick="print_id(9)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_clubs.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='13' onClick="print_id(13)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_clubs.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='17' onClick="print_id(17)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_clubs.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='21' onClick="print_id(21)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_clubs.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='25' onClick="print_id(25)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_clubs.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='29' onClick="print_id(29)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_clubs.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='33' onClick="print_id(33)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_clubs.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='37' onClick="print_id(37)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_clubs.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='41' onClick="print_id(41)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_clubs.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='45' onClick="print_id(45)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_clubs.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='49' onClick="print_id(49)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_clubs.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='WTF' id='2' onClick="print_id(2)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_diamonds.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='6' onClick="print_id(6)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_diamonds.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='10' onClick="print_id(10)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_diamonds.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='14' onClick="print_id(14)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_diamonds.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='18' onClick="print_id(18)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_diamonds.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='22' onClick="print_id(22)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_diamonds.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='26' onClick="print_id(26)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_diamonds.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='30' onClick="print_id(30)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_diamonds.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='34' onClick="print_id(34)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_diamonds.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='38' onClick="print_id(38)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_diamonds.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='42' onClick="print_id(42)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_diamonds.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='46' onClick="print_id(46)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_diamonds.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='50' onClick="print_id(50)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_diamonds.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='card-btn-x' id='3' onClick="print_id(3)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_hearts.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='7' onClick="print_id(7)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_hearts.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='11' onClick="print_id(11)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_hearts.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='15' onClick="print_id(15)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_hearts.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='19' onClick="print_id(19)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_hearts.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='23' onClick="print_id(23)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_hearts.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='27' onClick="print_id(27)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_hearts.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='31' onClick="print_id(31)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_hearts.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='35' onClick="print_id(35)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_hearts.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='39' onClick="print_id(39)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_hearts.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='43' onClick="print_id(43)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_hearts.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='47' onClick="print_id(47)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_hearts.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='51' onClick="print_id(51)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_hearts.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='card-btn-x' id='4' onClick="print_id(4)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_spades.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='8' onClick="print_id(8)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_spades.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='12' onClick="print_id(12)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_spades.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='16' onClick="print_id(16)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_spades.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='20' onClick="print_id(20)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_spades.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='24' onClick="print_id(24)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_spades.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='28' onClick="print_id(28)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_spades.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='32' onClick="print_id(32)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_spades.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='36' onClick="print_id(36)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_spades.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='40' onClick="print_id(40)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_spades.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='44' onClick="print_id(44)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_spades.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='48' onClick="print_id(48)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_spades.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn' id='52' onClick="print_id(52)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_spades.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Мы бы хотели, чтобы карты занимали меньше места по вертикали (может быть, 25–33% от их текущего размера) и корректно работали на мобильных устройствах.
В настоящее время мы можем уменьшить карты, но столкнемся с этими угловыми случаями, если заполнение будет неправильным, сцена совы слишком велика и бесконечный свиток нарушен.