They say a picture paints a thousand words:
On big screens, my elements look alright (3 slides of the slider all showing with margin between them):
They've got padding between them, which I think is happening automatically from the carouFredSel plugin.
However, as the screen gets smaller, elements should be hidden from view, and they do: (two slides showing but no margin between):
But they end up being bunched up together, with no margin between, like the immediate picture above, and the picture below. (three slides showing but no margin between them, and one slide is cut off):
Each of those colors is a different li element of the same height and width (see example for specifics).
Ideally, on a screen this small (886px) I would like to only show two li elements, so they both have room. And the on the smaller screen only show one, but God knows if this is possible.
Please find a full code example for those brave enough to help.
<!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>
And the script that makes the carasouel work:
<script>
$('.my-carousel').carouFredSel({
responsive: true,
items: {
visible: {
min: 1,
max: 4
},
}
});
</script>
Just to be clear, of the images in this post, the first one is of what it looks like when it's nice (enough width to show three slides and has margin between slides).
The second image is wrong because only one slide fits on a screen width that small (mobile).
And the third is wrong because only two slides should fit on a screen that size (tablet).
Part of me thinks I should just find another JS slider library as this one doesn't seem to have a documentation anymore.