Говорят, картина рисует тысячу слов:
На больших экранах мои элементы выглядят хорошо (3 слайда ползунка показывают с полем между ними):
У них есть отступы между ними, что, я думаю, происходит автоматически из плагина carouFredSel.
Однако, когда экран становится меньше, элементы должны быть скрыты от глаз, и они делают: (два слайда показывают, но без поля между):
Но они в конечном итоге сгруппированы вместе, без какого-либо разрыва между ними, как непосредственная картинка выше и картинка ниже. (показаны три слайда, но без полей между ними, и один слайд обрезан):
Каждый из этих цветов представляет собой отдельный элемент li одинаковой высоты и ширины (подробности см. В примере).
В идеале, на таком маленьком (886px) экране я хотел бы показать только два элемента li, чтобы у них обоих было место. И на меньшем экране только один, но Бог знает, возможно ли это.
Пожалуйста, найдите полный пример кода для тех, кто достаточно смел, чтобы помочь.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<!-- css styles -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
ul li {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<ul class="my-carousel">
<li>
<div class="inner-content">
<div style="width: 263px; height: 222px; background-color: blue;"></div>
</div>
</li>
<li>
<div class="inner-content">
<div style="width: 263px; height: 222px; background-color: yellow;"></div>
</div>
</li>
<li>
<div class="inner-content">
<div style="width: 263px; height: 222px; background-color: red;"></div>
</div>
</li>
</ul>
</div>
</div>
/** script goes here **/
</body>
</html>
И скрипт, который заставляет работать carasouel:
<script>
$('.my-carousel').carouFredSel({
responsive: true,
items: {
visible: {
min: 1,
max: 4
},
}
});
</script>
Чтобы было ясно, из изображений в этом посте, первое - это то, на что это похоже, когда это хорошо (достаточно ширины, чтобы показать три слайда и имеет поле между слайдами).
Второе изображение неверно, потому что только один слайд умещается на небольшой ширине экрана (мобильный).
И третий - неправильный, потому что на экране такого размера (планшета) должны поместиться только два слайда.
Часть меня думает, что я должен просто найти другую библиотеку слайдеров JS, поскольку у этой, похоже, больше нет документации.