完整攻略:全面解析多种Bootstrap图片轮播效果
介绍
Bootstrap是一个流行的前端框架,它提供了许多有用的特性,包括灵活的响应式网格系统、强大的样式组件和易于使用的插件等等。其中一个重要的插件就是图片轮播组件,这个组件可以用来创建各种各样的漂亮的轮播效果,这篇文章将详细讲解多种Bootstrap图片轮播效果的实现。
准备工作
在开始编写Bootstrap图片轮播之前,需要先引入jQuery和Bootstrap的CSS和JS文件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 图片轮播效果</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
实现
基础轮播
一个基本的轮播需要三部分内容:
- 用
<div>
标签包围一个图片列表 - 给包围图片列表的
<div>
标签添加carousel
和slide
两个类(slide
标识是轮播内容是滑动还是淡入淡出) - 添加用于控制轮播的箭头和指示符
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/slide-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-3.jpg" alt="Third slide">
</div>
</div>
</div>
为了实现箭头的控制,在图片轮播 <div>
内需要添加一个包含类名为 carousel-control-prev
的 <a>
标签和一个包含类名为 carousel-control-next
的<a>
标签。在每个 <a>
标签内添加一个小图标样式即可。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/slide-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleSlidesOnly" 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="#carouselExampleSlidesOnly" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
多种效果轮播
淡入淡出
淡入淡出的标志是轮播内容的过渡方式采用了淡入淡出的方式,这也使得轮播更加优雅。
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/slide-1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-3.jpg" alt="Slide 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
带缩略图
有时候,我们需要一个轮播效果,能够加入缩略图来展示图片的预览。Bootstrap提供了 carousel-indicators 类,以实现一个缩略图导航指示器。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/slide-1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-3.jpg" alt="Slide 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
带标题和描述
有时候,轮播图不仅需要通过图片展现内容,还需要通过标题和描述说明和点出重点。Bootstrap提供了添加标题和描述的方式,需要在依次添加 HTML 的代码块,并修改 .carousel-caption
样式来实现。
<div id="carouselExampleCaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaption" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaption" data-slide-to="1"></li>
<li data-target="#carouselExampleCaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/slide-1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slide-3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption" 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="#carouselExampleCaption" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
结论
Bootstrap图片轮播组件提供了多种轮播效果来满足不同的需求和场合,我们只需要在基础轮播的基础上进行相应的修改和添加即可。实现一个简单的轮播非常容易,但如果要实现特定的样式和需求,需要深入理解Bootstrap图片轮播的实现原理,耐心地细心地修改其代码。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:全面解析多种Bootstrap图片轮播效果 - Python技术站