前端|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代码,可以直接触发执行。


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

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    877
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    402
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    305
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    275
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    399
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    584
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    615
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    189
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    534
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    345