他们说一幅画描绘了一千个单词:
在大屏幕上,我的元素看起来还不错(滑块的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滑块库,因为这个似乎不再有任何文档。