我正在使用引导滑块。
- 在桌面上,它有三张幻灯片,每张幻灯片有 4 个图块
我正在考虑实现这一点的最有效和最优化的方法。
Option 1- 创建 3 组不同的滑块。一次仅显示一个
Option 2- 使用 jquery 检测屏幕宽度,并以编程方式添加额外的图块作为幻灯片,隐藏多余的图块。我想这会非常复杂。
如果有更好的方法来实现这一点,请帮忙。
这里是:
.carousel-inner .item.active {
display: flex;
}
.carousel-inner .item {
background-color: #212121;
color: white;
padding: 0 15px;
}
#desktopCarousel .carousel-inner .item > .row {
min-height: 480px;
}
#tabletCarousel .carousel-inner .item > .row {
min-height: 360px;
}
.carousel-inner .item > .row {
flex-grow: 1;
min-height: 320px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.carousel-inner .item > .row [class^="col-"] {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
text-align: center;
}
.carousel-inner .item > .row .row {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.carousel-inner .item > .row .row [class^="col-"] {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="desktopCarousel" class="carousel slide hidden-xs hidden-sm" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#desktopCarousel" data-slide-to="0" class="active"></li>
<li data-target="#desktopCarousel" data-slide-to="1"></li>
<li data-target="#desktopCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-6">
First item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Second item
</div>
<div class="col-sm-6">
Third item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Fourth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Fifth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Sixth item
</div>
<div class="col-sm-6">
Seventh item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Nineth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Tenth item
</div>
<div class="col-sm-6">
Eleventh item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Twelfth item
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#desktopCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#desktopCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="tabletCarousel" class="carousel slide hidden-xs hidden-md hidden-lg" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#tabletCarousel" data-slide-to="0" class="active"></li>
<li data-target="#tabletCarousel" data-slide-to="1"></li>
<li data-target="#tabletCarousel" data-slide-to="2"></li>
<li data-target="#tabletCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-6">
First item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Second item
</div>
<div class="col-sm-12">
Third item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Fourth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Fifth item
</div>
<div class="col-sm-12">
Sixth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Seventh item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
<div class="col-sm-21">
Nineth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Tenth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Eleventh item
</div>
<div class="col-sm-12">
Twelvth item
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#tabletCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#tabletCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="mobileCarousel" class="carousel slide hidden-sm hidden-md hidden-lg" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mobileCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mobileCarousel" data-slide-to="1"></li>
<li data-target="#mobileCarousel" data-slide-to="2"></li>
<li data-target="#mobileCarousel" data-slide-to="3"></li>
<li data-target="#mobileCarousel" data-slide-to="4"></li>
<li data-target="#mobileCarousel" data-slide-to="5"></li>
<li data-target="#mobileCarousel" data-slide-to="6"></li>
<li data-target="#mobileCarousel" data-slide-to="7"></li>
<li data-target="#mobileCarousel" data-slide-to="8"></li>
<li data-target="#mobileCarousel" data-slide-to="9"></li>
<li data-target="#mobileCarousel" data-slide-to="10"></li>
<li data-target="#mobileCarousel" data-slide-to="11"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-12">
First item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Second item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Third item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Fourth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Fifth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Sixth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Seventh item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Nineth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Tenth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Eleventh item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Twelveth item
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#mobileCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mobileCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
请注意,您实际上并不需要 CSS(它只是为桌面滑块创建布局,将每个项目中的内容(使用 Flexbox)+颜色居中,但我假设您已经涵盖了这些内容)。 CSS 没有前缀,如果有帮助的话,您可以在以下位置找到 SCSS:小提琴 https://jsfiddle.net/websiter/ufm22mqs/.
另外,您可能想要设置不同的min-height
s 适用于移动设备/平板电脑/桌面设备上的项目。
除此之外,它非常干净......引导程序。无定制JS
, 无定制CSS
。只是标记。
Edit:(根据评论)如果您不希望所有滑块始终运行并且更喜欢根据调整大小侦听器初始化每个滑块,则在更改@media
间隔(我推荐查询.js http://wicky.nillia.ms/enquire.js/为此 - 0.8k 缩小,在任何浏览器/设备上运行),将每个轮播的标记放在脚本中,具有不同的 id:
<script id="desktop-markup" type="text/template">
<div id="desktopCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
<script id="tablet-markup" type="text/template">
<div id="tabletCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
<script id="mobile-markup" type="text/template">
<div id="mobileCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
On page load
并在更改媒体间隔时,根据当前获取模板的内容@media
间隔(即$('#mobile-markup').html()
),将其放入指定的DOM容器中并运行.carousel()
on it:
$('.carousel-container').html(
$('#mobile-markup').html()
).find('.carousel').carousel(options);
// where options is optional. :)
// see http://getbootstrap.com/javascript/#carousel-options
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)