前端|Bootstrap 实例 - 简单的轮播插件

简介: 前端|Bootstrap 实例 - 简单的轮播插件

1.Bootstrap轮播(Carousel)插件

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。要使用Bootstrap,需要先引入Bootstrap的相关文件。

1.1 引入Bootstrap的相关文件


2.轮播图三要素:小圆圈、图片、左右按钮

图1.2 轮播图代码


3.轮播图组件注解

1data-ride=carousel:触发轮播动作,实现自动播放,用于标记轮播在页面加载时就开始动画播放

2data-intarval=1000:表示播放的时间间隔,单位毫秒,默认值5000

3data-wrap=true:表示循环播放,如果是false会停止到最后一张

4data-pause=hover:表示暂停(默认),鼠标移上去暂停到当前幻灯片,还有false属性

5class="carousel-indicators":圆点样式,直接使用,Bootstrap组件

6data-target:指向事件的目标,即要触发的元素

7data-slide-to:向轮播传递一个滑动索引,把滑块移动到一个特定的索引,从0开始计数

8data-slide:接受关键字prevnext,用来改变幻灯片的位置

9class="left carousel-control" 表示用左边修饰的class

10class="glyphicon glyphicon-chevron-left" 表示左箭头

11role="button"a元素转换为button按钮功能进行使用

12aria-hidden="true" 图标的可访问性,避免混淆的输出内容,图标没必要被类似屏幕阅读器的设备访问,hidden就是对其隐藏

13class="sr-only"主要用于增强可访问性,能保证屏幕阅读器正确读取且不会影响 UI的视觉呈现

(14)图片上的div加上相应的class名字,直接调用bootstrap组件,有相应的js代码和css代码,可以直接触发执行。


目录
相关文章
|
1月前
|
容器
Bootstrap5 轮播1
Bootstrap5 轮播组件用于创建循环播放的幻灯片效果。通过设置 `carousel` 类和 `data-bs-ride="carousel"` 属性,结合指示符、图片容器和切换按钮,可实现自动或手动切换的图片轮播。
Bootstrap5 轮播1
|
5天前
|
资源调度 前端开发 JavaScript
Bootstrap日期选择器插件bootstrap-datepicker
Bootstrap日期选择器插件bootstrap-datepicker
29 12
|
10天前
|
前端开发 JavaScript
bootstrap右键菜单插件
这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作,并通过tether插件进行定位,具有多级菜单,灵活,响应式等特点
|
25天前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
1月前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
28 3
|
1月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
35 3
|
2月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
499 8
|
2月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
304 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
3月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
31 2
|
2月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
135 0