- 首页
- 其他开发
- 带有多列幻灯片的 Bootstrap 4 Carousel
带有多列幻灯片的 Bootstrap 4 Carousel
[英] Bootstrap 4 Carousel with multi col slides
本文介绍了带有多列幻灯片的 Bootstrap 4 Carousel的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要我的旋转木马在没有图像的情况下运行，而是旋转多列(col-4)的行.
它基本上可以工作，但是列是垂直显示的，而不是代码建议的 3 并排显示.我错过了什么?
<div class="carousel-inner"><div class="row rss_ticker carousel-item m-0"><div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
我的代码可以在这里看到.https://jsfiddle.net/pwf1dahr/1/
解决方案
要完全控制 Bootstrap 框架中的轮播响应列，并控制每个断点中滑动的列数，是使用 Ken Wheelers Slick 滑块.这很棒！我的演示只是浅尝辄止，您也可以根据需要更改每个断点上的滑块选项.请参阅他的文档.
请注意，在我的 Slick jQuery javascript 中，我定义了 mobileFirst: true 这使得 Slick 的断点就像 Bootstrap 的断点一样工作......移动优先！
jQuery
这是一个复制 Bootstrap 4 网格断点的 javascript 数组，然后我将其传递给 Slick 滑块 jQuery 函数.下面的代码有点矫枉过正，演示了如何更改列大小以及在每个 Slick 幻灯片动画上滑动的列数.
var 断点 = {//小屏幕/手机SM: 576,//中屏/平板电脑医学博士:768，//大屏幕/桌面lg: 992,//超大屏幕/宽桌面XL:1200};//页面滑块$('#slick').slick({自动播放:真实，自动播放速度:2000，可拖动:真实，无限:真实，点:假，箭头:假，速度:1000，移动优先:真，幻灯片显示:1，幻灯片滚动:1，回应:[{断点:breakpoint.sm，设置:{幻灯片显示:2，幻灯片滚动:2}},{断点:breakpoint.md，设置:{幻灯片显示:3，幻灯片滚动:3}},{断点:breakpoint.lg，设置:{幻灯片显示:4，幻灯片滚动:4}},{断点:breakpoint.xl，设置:{幻灯片显示:5，幻灯片滚动:5}}]});
Sass (css)
如果您不使用 sass，请告诉我我会使用 css 进行更新.下面这个 sass/css，模拟 Bootstrap 4 的行/列边距和填充样式.
#slick {.slick-list {利润: {左:-15px；右:-15px；}}.slick-slide {padding-right: 15px;左边距:15px；&:焦点{大纲:无；}}}
非常简单，而且比 Bootstrap 的轮播给你更多的控制.
请参阅此 jsfiddle，您可以在其中测试 Bootstrap 的每个断点，并且在每个断点上，您将看到在我上面的脚本中定义的更改.上面的 jQuery Slick 函数，当 Slick 滑动到下一张幻灯片时，我已经在每个断点 slidesToScroll 上设置了滑动相同数量的 slidesToShow .. 但你可以改变这些设置为您想要的任何内容.
这种方法的好处在于，您可以在一个容器中循环所有文章/帖子，而不是中断循环以输出额外的 .row div.只需简单地使用 Slick 的函数来控制在每个断点中显示的列数.
查看工作演示 https://jsfiddle.net/joshmoto/rh1wymuk/
看下面的stackoverflow演示，但你不能测试断点
var breakpoint = {//小屏幕/手机SM: 576,//中屏/平板电脑医学博士:768，//大屏幕/桌面lg: 992,//超大屏幕/宽桌面XL:1200};//光滑的滑块$('#slick').slick({自动播放:真实，自动播放速度:2000，可拖动:真实，无限:真实，点:假，箭头:假，速度:1000，移动优先:真，幻灯片显示:1，幻灯片滚动:1，响应:[{断点:breakpoint.sm，设置:{幻灯片显示:2，幻灯片滚动:2}},{断点:breakpoint.md，设置:{幻灯片显示:3，幻灯片滚动:3}},{断点:breakpoint.lg，设置:{幻灯片显示:4，幻灯片滚动:4}},{断点:breakpoint.xl，设置:{幻灯片显示:5，幻灯片滚动:5}}]});
#slick .slick-list {左边距:-15px；右边距:-15px；}#slick .slick-slide {padding-right: 15px;左边距:15px；}#slick .slick-slide:focus {大纲:无；}
<!-- 最新编译和缩小的 CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><!-- Slick CSS --><link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/><!-- jQuery 库--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- 波普尔 JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><!-- 最新编译的 JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><!-- Slick jQuery min --><script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script><标题><nav class="navbar navbar-expand-md navbar-dark bg-dark"><a class="navbar-brand mr-auto" href="#">Bootstrap 4 中的 Slick</a><a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a></nav></标题><main class="pt-3 pb-3"><div class="容器"><div id="slick"><div class="slide"><div class="card"><img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top"/><div class="card-body"><h5 class="card-title">文章标题</h5><p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris.Nullam sollicitudin arcu ac diam ornare，eget iaculis nisl accumsan.</p><a href="#" class="btn btn-primary">去某处</a>
<div class="slide"><div class="card"><img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top"/><div class="card-body"><h5 class="card-title">文章标题</h5><p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris.Nullam sollicitudin arcu ac diam ornare，eget iaculis nisl accumsan.</p><a href="#" class="btn btn-primary">去某处</a>
<div class="slide"><div class="card"><img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top"/><div class="card-body"><h5 class="card-title">文章标题</h5><p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris.Nullam sollicitudin arcu ac diam ornare，eget iaculis nisl accumsan.</p><a href="#" class="btn btn-primary">去某处</a>
<div class="slide"><div class="card"><img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top"/><div class="card-body"><h5 class="card-title">文章标题</h5><p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris.Nullam sollicitudin arcu ac diam ornare，eget iaculis nisl accumsan.</p><a href="#" class="btn btn-primary">去某处</a>
<div class="slide"><div class="card"><img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top"/><div class="card-body"><h5 class="card-title">文章标题</h5><p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris.Nullam sollicitudin arcu ac diam ornare，eget iaculis nisl accumsan.</p><a href="#" class="btn btn-primary">去某处</a>
<div class="slide"><div class="card"><img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top"/><div class="card-body"><h5 class="card-title">文章标题</h5><p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris.Nullam sollicitudin arcu ac diam ornare，eget iaculis nisl accumsan.</p><a href="#" class="btn btn-primary">去某处</a>
</main>
I need my carousel to run without images, and instead rotate rows with multiple columns(col-4).
Its essentially working, but the cols are displaying vertically and not 3 side by side as the code suggests. What am I missing?
<div id="demo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="row rss_ticker carousel-item m-0">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">
My code can be seen here. https://jsfiddle.net/pwf1dahr/1/
解决方案
To have full control over carousel responsive columns in Bootstrap's framework, and have control over how many columns to slide in each breakpoint, is to use Ken Wheelers Slick slider. Its awesome! My demo is only scratching the surface, you can change slider options on every breakpoint if you want too. See his documentation.
Please note in my Slick jQuery javascript, I am defining mobileFirst: true which makes Slick's breakpoints work just like Bootstrap's breakpoints.. mobile first!
jQuery
This is a javascript array replicating Bootstrap 4's grid breakpoints which I then pass to the Slick slider jQuery function. The code below is overkill, to demo how you can change the column size and how many columns to slide on each Slick slide animation.
var breakpoint = {
// Small screen / phone
sm: 576,
// Medium screen / tablet
md: 768,
// Large screen / desktop
lg: 992,
// Extra large screen / wide desktop
xl: 1200
};
// page slider
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.xl,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});
Sass (css)
If your not using sass, let me know i'll update with css. This sass/css below, emulates Bootstrap 4's row/column margin and padding styles.
#slick {
.slick-list {
margin: {
left: -15px;
right: -15px;
}
}
.slick-slide {
padding-right: 15px;
padding-left: 15px;
&:focus {
outline: none;
}
}
}
Very simple, and way more control than Bootstrap's carousel gives you.
See this jsfiddle where you can test each of Bootstrap's breakpoints, and on each breakpoint, you will see a change which is defined in my script above. The jQuery Slick function above, when Slick slides to the next slide, i've set on each breakpoint slidesToScroll to slide the same amount of slidesToShow.. but you can change these settings to what ever you want.
The nice thing about this method, is that you can loop all of your articles/posts in one single container, rather than breaking your loop to output an extra .row div. Just simply use Slick's function to control how many columns to show in each breakpoint.
See working demo https://jsfiddle.net/joshmoto/rh1wymuk/
See below stackoverflow demo but you wont be able to test breakpoints
var breakpoint = {
// Small screen / phone
sm: 576,
// Medium screen / tablet
md: 768,
// Large screen / desktop
lg: 992,
// Extra large screen / wide desktop
xl: 1200
};
// slick slider
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.xl,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});
#slick .slick-list {
margin-left: -15px;
margin-right: -15px;
}
#slick .slick-slide {
padding-right: 15px;
padding-left: 15px;
}
#slick .slick-slide:focus {
outline: none;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Slick CSS -->
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Slick jQuery min -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>
<a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</nav>
</header>
<main class="pt-3 pb-3">
<div class="container">
<div id="slick">
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/600x400&text=thumbnail" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</main>
这篇关于带有多列幻灯片的 Bootstrap 4 Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
