bootstrap 轮播craousel 采坑之(修改默认鼠标浮动轮播不停止)
首先上bootstrap 官网 https://v3.bootcss.com/javascript/#carousel
设置这个参数就可以,后面说如何采坑。见代码
html 部分
<!-- 轮播one -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner bxwz">
<div class="item active bannerone-slide ">
<div class="container banner_position">
<h2>TOP-TIER IT CARE WITH</h2>
<h2>1/5 OF SILLICAN-VALLEY-COST</h2>
<h4>WE OFFERS GREAT SERVICE AT EVEN GREATER RATES</h4>
<div><span>ARCHITECT</span><span>PROJECT MANAGER</span><span>ENGINEER</span></div>
</div>
</div>
<div class="item bannertwo-slide">
<div class="container banner_position">
<h2>ONE STOP. FROM LISTENING TO YOU,</h2>
<h2>TO DEPLOYMENT/MAINTENANCE</h2>
<div><span>ENGINEER</span><span>DESIGNER</span><span>NETWCRKMANAGEMENT</span>
<span>MATHEMATICIAN</span></div>
</div>
</div>
<div class="item bannerthree-slide">
<div class="container banner_position">
<h2>YES WE EVEN DO</h2>
<h2>DATA MODELLING</h2>
<h4>WE OFFERS GREAT SERVICE AT EVEN GREATER RATES</h4>
<div><span>ARCHITECT</span><span>PROJECT MANAGER</span><span>ENGINEER</span></div>
</div>
</div>
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators" data-ride="carousel" data-interval="1000">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
js部分
$('#myCarousel').carousel({
interval: 2500,
pause: null,
wrap:true
});
这样设置是不对的,出不来效果,鼠标悬浮上去还是会轮播,
解决办法:必须修改HTML部分中第一行
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2500">
修改为
<div id="myCarousel" class="carousel slide" >
这个样子就ok了
bootstrap 轮播craousel 采坑之(修改默认鼠标浮动轮播不停止)的更多相关文章
- Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记
公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...
- Hadoop环境搭建--Docker完全分布式部署Hadoop环境(菜鸟采坑吐血整理)
系统:Centos 7,内核版本3.10 本文介绍如何从0利用Docker搭建Hadoop环境,制作的镜像文件已经分享,也可以直接使用制作好的镜像文件. 一.宿主机准备工作 0.宿主机(Centos7 ...
- Spring Cloud Config采坑记
1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...
- rabbitmq在ios中实战采坑
1. rabbitmq在ios中实战采坑 1.1. 问题 ios使用rabbitmq连接,没过多久就断开,并报错.且用android做相同的步骤并不会报错,错误如下 Received connecti ...
- 从源码看Spring Security之采坑笔记(Spring Boot篇)
一:唠嗑 鼓捣了两天的Spring Security,踩了不少坑.如果你在学Spring Security,恰好又是使用的Spring Boot,那么给我点个赞吧!这篇博客将会让你了解Spring S ...
- Charles 抓包工具安装和采坑记录
Charles 抓包工具安装和采坑记录 网络抓包是解决网络问题的第一步,也是网络分析的基础.网络出现问题,第一步肯定是通过抓包工具进行路径分析,看哪一步出现异常.做网络爬虫,第一步就是通过抓包工具对目 ...
- alert大法看执行流程(一次采坑)
页面的dom元素加载完了,给元素一次性添加事件. 收获:事件都是一次性给添加好的,不是点击一次,................................................... ...
- tk.mybatis通用工具采坑记
tk.mybatis通用工具pom <!--mybatis依赖--> <dependency> <groupId>org.mybatis.spring.boot&l ...
- python+selenium自动化登录dnf11周年活动界面领取奖励登录部分采坑总结[1]
背景: Dnf的周年庆活动之一,游戏在6月22日 06:00~6月23日 06:00之间登陆过游戏后可以于6月25日 16:00~7月04日 06:00领取奖励 目标:连续四天自动运行脚本,自动领取所 ...
随机推荐
- BUAA 169 电话费
http://oj55.bianchengla.com/problem/169/ 还有这个,不怎么好做,最后用栈做出来了. 感觉比较有用的一个数据是: 10 3 1010101010 代码如下: #i ...
- 21Hash算法以及暴雪Hash
一:哈希表简介 哈希表是一种查找效率极高的数据结构,理想情况下哈希表插入和查找操作的时间复杂度均为O(1),任何一个数据项可以在一个与哈希表长度无关的时间内计算出一个哈希值(key),然后在常量时间内 ...
- vue2——指令渲染,{{}}渲染
博客地址 :https://www.cnblogs.com/sandraryan/ 声明式的渲染,以{{}}的形式调用数据 <!DOCTYPE html> <html lang=&q ...
- day1_python运算符
运算符 计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运算.赋值运算 ...
- mysql聚合函数和分组
文章实例的数据表,来自上一篇博客<mysql简单查询>:http://blog.csdn.net/zuiwuyuan/article/details/39349611 一. 聚合函数 聚合 ...
- springboot中使用spring-session实现共享会话到redis(二)
上篇文章介绍了springboot中集成spring-session实现了将session分布式存到redis中.这篇在深入介绍一些spring-session的细节. 1.session超时: 在t ...
- P1052 国王放置问题
题目描述 在n*m的棋盘上放置k个国王,要求k个国王互相不攻击,有多少种不同的放置方法.假设国王放置在第(x,y)格,国王的攻击的区域是:(x-1,y-1), (x-1,y),(x-1,y+1),(x ...
- 2019-11-20-Github-给仓库上传-NuGet-库
title author date CreateTime categories Github 给仓库上传 NuGet 库 lindexi 2019-11-20 08:18:14 +0800 2019- ...
- dotnet 新项目格式与对应框架预定义的宏
在 sdk style 的项目格式支持使用多框架开发,此时需要在代码里面通过宏判断,在编译的时候执行不同的代码.本文告诉大家在框架里面对应的预定义的条件编译符有哪些 在让一个 csproj 项目指定多 ...
- VisualStudio 断点调试详解
本文详细告诉大家 VisualStudio 断点调试的功能和使用方法,本文使用的是最新 VisualStudio2019 的功能,也许在你看到这篇博客的时候这个版本已经过时 本文将会按照从简单到复杂, ...