正文 

当前位置： 首页 > 开发 > java教程

bootstrap轮播图carousel插件(代码片段)

cui-ting cui-ting     2022-12-08     307

关键词：

一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

 

二、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图）

技术图片
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- 轮播图片及说明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox" style="background-image: url(‘images/2-1.png‘)"></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(‘images/2-2.png‘)"></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(‘images/2-3.png‘)"></a>
          </div>
        </div>
        <!-- 控制按钮：左右切换 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
技术图片
技术图片
        .pc_imgBox
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position:  center;
            background-repeat: no-repeat;
        
        .carousel-indicators
            background: #ccc;
技术图片

技术图片

三、例子：在移动端使用轮播图（宽度自适应，高度自动变化，使用img引入图片）

技术图片
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- 轮播图片及说明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox"><img src="images/1-1.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-2.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-3.png" ></a>
          </div>
        </div>
        <!-- 控制按钮：左右切换 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
技术图片
技术图片
        .m_imgBox
            display: block;
            width: 100%;
        
        .carousel-indicators
            background: #ccc;
技术图片

技术图片

四、例子：响应式的轮播图（利用媒体查询自适应PC端和移动端，注意应用在pc和移动端的图片是不一样的！）

技术图片
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- 轮播图片及说明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(‘images/2-1.png‘)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-1.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(‘images/2-2.png‘)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-2.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(‘images/2-3.png‘)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-3.png" ></a>
          </div>
        </div>
        <!-- 控制按钮：左右切换 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
技术图片
技术图片
        .pc_imgBox
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position:  center;
            background-repeat: no-repeat;
        
        .m_imgBox
            display: block;
            width: 100%;
        
        .carousel-indicators
            background: #ccc;
技术图片
 

技术图片

ps:实现轮播图时间间隔改变的两种方式
在data-ride后面加上一个属性data-interval=“millisecond”，其中，millisecond为需要设置的毫秒数，如下：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
使用JavaScript语句实现：
官网给出的代码是：
$(‘.carousel‘).carousel(
interval: 2000
);

 

python测试开发django-191.bootstrap3轮播图（carousel）(代码片段)

前言Bootstrap3实现轮播图滚动显示轮播图（Carousel）只需替换成自己本地图片/static/a1.png即可实现轮播图<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--引入css--&g... 查看详情

bootstrap之carousel轮播图自定义分页器(代码片段)

最近要开发一个轮播图的看板页面，试用下bootstrap的轮播图组件，因为分页器的部分需要自定义（文字过长需要放到轮播图区域的外面），使用 Listgroup组件作为轮播图的分页器放在左边。 <!DOCTYPEhtml><htmllang="en">&... 查看详情

bootstrap学习笔记轮播（carousel）插件

Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除些之外，内容也是足够灵活的，可以是图像，内嵌框架，视频或者其他您想要旋转的任何类型的内容。示例：下面是不念旧恶简单的幻灯片，使用bootstrap... 查看详情

bootstrap的js插件之轮播(carousel)

轮播请查看下面演示样例，基本已经涵盖最经常使用的一个轮播<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>js插件_轮播& 查看详情

bootstrap图片轮播插件carousel

...有几张图片放置几个li），以白点的形式展示(具体样式在bootstrap.css文件第5835行起)第三步：设置轮播图片播放区最关键的区域，主要用来放置需要轮播的图片，用carousel-inner样式控制，用item容器放置每张轮播的图片。第四步：设... 查看详情

bootstrap轮播图的切换按钮如何制作？

参考技术A//在自定义css样式中加入下面代码，自定义css在bootstrap.min.css后引入；.carousel>.left,.carousel>.rightbackground-image:none；Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵... 查看详情

如何用bootstrap制作轮播图

...xt01首先我们需要新建一个HTML5的文档，然后在文档中导入Bootstrap的样式文件，这个文件中包含了轮播图所有的样式定义，如下图所示02接下来我们需要导入脚本文件，注意先导入Jquery文件，然后导入bootstrap的脚本文件，顺序一定... 查看详情

extjs轮播图ui组件(carousel)(代码片段)

...ww.cnblogs.com/cqpanda/p/17177307.html更新记录2023年4月11日发布。Carousel组件（MordenToolkit）基本使用xtype:\'carousel\',width:500,height:300,items:[html:\'Item1\',style:\'background-color:#5E99CC\',html:\'Item2\',style:\'background-color:#759E60\',html:\'Item3\',style:\'background... 查看详情

使用element的el-carousel轮播图组件添加点击事件获取点击内容(代码片段)

项目场景：使用el-carousel轮播图组件时发现只有change事件，想要添加点击事件，发现点击没反应解决方案：@click换成@click.native接收循环的轮播图的数据即可bannerclick(item)console.log(item,'11111');, 查看详情

使用element的el-carousel轮播图组件添加点击事件获取点击内容(代码片段)

项目场景：使用el-carousel轮播图组件时发现只有change事件，想要添加点击事件，发现点击没反应解决方案：@click换成@click.native接收循环的轮播图的数据即可bannerclick(item)console.log(item,'11111');, 查看详情

轮播图fade(代码片段)

<style>.carouselwidth:100%;height:420px;padding:0px;margin:0auto;position:relative;&:hover.carousel-btn-directiondisplay:block;.carousel-imgswidth:100%;height:100%;padding:0px;margin:0px;list-style:none;background:white;.carousel-imgsliwidth:100%;height:100%;position:absolute;z-index:0;opa... 查看详情

前端bootstrap案例：轮播图(代码片段)

bootstrap框架系列案例案例网址【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情

layui轮播图动态数据不显示问题(代码片段)

layui.use(‘carousel‘,function()varcarousel=layui.carousel;varins=carousel.render(elem:‘#test1‘,width:‘100%‘,//设置容器宽度height:‘100%‘,arrow:‘always‘,//始终显示箭头//,anim:‘updown‘//切换动画方式autoplay:false);//重置轮播ins.reload(elem:‘#test1‘,widt... 查看详情

bootstrap启动（关闭）轮播

$(‘.carousel‘).carousel();//启动轮播$(‘.carousel‘).carousel(‘pause’);//关闭轮播　　 查看详情

第四天轮播图

...的做出轮播图 不用在去JS上设置时间等感觉方便的多carousel-indicators和carousel-inner运用就可以 但改不了那个小圈圈的样式很难受 刚做完发现不能自动播百度后 加上class="carouselslide"id="slidershow"data-ride="carousel"data-interv... 查看详情

web前端设计必备网页特效案例-轮播图(代码片段)

...分析CSS修饰功能需求原生JS实现JS代码拓展知识插件实现Bootstrap里面JS 插件第一步：引入插件和css，js文件第二步：在bootstrap网站的JavaScript插件里面找到轮播图，然后复制代码到自己的body里面,在做修改。根据自己... 查看详情

运行 js 脚本时，Bootstrap 4 carousel 停止工作

】运行js脚本时，Bootstrap4carousel停止工作【英文标题】：Bootstrap4carouselstoppedworkingwhenrunningajsscript【发布时间】：2021-01-1203:21:59【问题描述】：我正在使用带有CDN的bootstrap4。问题是我有一个boostrap4轮播（取自他们的官方网站）并... 查看详情

Bootstrap 5 Carousel 模式

】Bootstrap5Carousel模式【英文标题】：Bootstrap5CarouselinModal【发布时间】：2021-12-0621:32:07【问题描述】：尝试实现一个图片库，点击缩略图将打开一个模态框，并且在模态框体内，可以循环显示图像的轮播。我无法获得下一个和上... 查看详情