Bootstrap 4 自定义轮播
Posted
技术标签:
【中文标题】Bootstrap 4 自定义轮播【英文标题】：Bootstrap 4 custom carousel 【发布时间】：2018-12-14 06:48:53 【问题描述】：我是 bootstrap 新手，我需要一些帮助来制作这个自定义轮播。 下面的图片将完美地解释我想要做什么！ 谢谢！
Desktop view
Mobile view
【问题讨论】：
请提供一个最小的代码示例，这样我们才能真正给你一个合适的答案 【参考方案1】：这是我使用 JQuery 的解决方案。确保将每个图像的 src 属性更新为适当的值。我已经包含了指向本文底部使用的大多数重要方法的链接。
<html>
<head>
<title>Custom Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CDNs -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$(document).ready(function()
// lg breakpoint that bootstrap defines is at 992px width
// Look at the Bootstrap Responsive Breakpoints page for more info
if($(window).width() <= 992)
// Look at JQuery Starts-With-Selector and Remove Documentation for more info
$("div[id^='3-slides-']").remove();
else
$("div[id^='slide-']").remove();
);
</script>
</head>
<body>
<div id="custom-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- First 3 slides -->
<div class="carousel-item active" id="3-slides-1">
<div class="container-fluid">
<!-- Check out Bootstrap Grid Documentation for info about rows/cols -->
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item active" id="slide-1">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Second 3 slides -->
<div class="carousel-item" id="3-slides-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-4">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-5">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-6">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Third 3 slides -->
<div class="carousel-item" id="3-slides-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-7">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-8">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-9">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#custom-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#custom-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
CodePen
这不是响应式的。 如果将窗口大小调整为移动视图的大小，则不会调用 JQuery 函数；但是，如果屏幕以移动尺寸开始，则轮播将是合适的。
如果您需要在调整大小期间将轮播更新到正确的视图，我相信您可以在窗口上围绕我使用的主要 JQuery 函数包装一个调整大小函数。 例如，
$(window).resize(function()
if( $(this).width() > width )
if($(window).width() <= 992)
...
else
...
有用的链接
Bootstrap Responsive Breakpoints Bootstrap Carousel Documentation Bootstrap Grid Documentation JQuery Remove Documentation JQuery Resize Documentation JQuery Starts-With-Selector Documentation【讨论】：
以上是关于Bootstrap 4 自定义轮播的主要内容，如果未能解决你的问题，请参考以下文章
我可以在 react-bootstrap 中自定义轮播指示器吗
html Bootstrap Custom Select通过Selectpicker（Bootstrap select）https://github.com/silviomoreto/bootstra