bootstrap轮播，播放到最后一张图片的时候，就不正确了。

问题：

　　使用bootstrap的轮播做图片幻灯片，发现轮播到最后一张的时候，显示不正常了。

原因：

　　在写carousel-indicators的class的时候，写错了。下面代码块中的红色是正确的写法，在此之前我错把class="active"写成class="active item"；把class=""错写成class="item"。

<div id='MySlide' class='carousel slide' data-ride="carousel"><ol class='carousel-indicators'><li data-target="#MySlide" data-slide-to="0" class="active"/><li data-target="#MySlide" data-slide-to="1" class=""/><li data-target="#MySlide" data-slide-to="2" class=""/></ol><!-- Carousel items --><div class='carousel-inner'><div class='active item'><img src="./img/1.png" alt='slide 1' width='480' height='320'/><div class="carousel-caption"><h3>第一张幻灯片的标题</h3><p>它的说明文字。。。</p></div></div><div class='item'><img src="./img/2.png" alt='slide 2' width='480' height='320'/><div class="carousel-caption"><h3>第二张幻灯片的标题</h3><p>它的说明文字。。。</p></div></div><div class='item'><img src="./img/3.png" alt='slide 3' width='480' height='320'/><div class="carousel-caption"><h3>第三张幻灯片的标题</h3><p>它的说明文字。。。</p></div></div></div><!-- Carousel nav --><a class='carousel-control left' href='#MySlide' data-slide='prev'><span class="glyphicon glyphicon-chevron-left"></span></a><a class='carousel-control right' href='#MySlide' data-slide='next'><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

显示到第三章图片（正常）：

再往后，就不正常了，只有两个箭头：

转载于:https://www.cnblogs.com/charles123/p/3683535.html

bootstrap轮播，播放到最后一张图片的时候，就不正确了。相关推荐

第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件学习要点: 1.轮播插件本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
Bootstrap轮播插件，代码步骤
轮播插件: Bootstrap轮播插件是一种灵活的响应式的向站点添加滑块的方式轮播的内容可以是,图像,内嵌框架,视频或者其他想要放置的任何类型的内容使用该插件必须引入bootstrap.js或者压 ...
【轮播图】使用bootstrap轮播插件（Carousel）
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.内容是足够灵活的,可以是图像.内嵌框架.视频或者其他想要放置的任何类型的内容. 源代码 <!DOCTYP ...
Bootstrap 轮播（Carousel）插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
windows如何实现视屏自动定时、全屏、轮播播放
windows如何实现视屏自动定时.全屏.轮播播放一.下载ffmpeg 二.全屏播放三.定时播放本文的实现方式是通过ffmpeg工具实现的,想要了解这个工具有多强大,请自行移步Google 一 ...
bootstrap轮播图怎么居中
bootstrap的轮播图代码直接用不修改的话, 容易出现以下情况: 很多人的解决办法就是把图片宽度设置为100%,但如果仅仅只是将图片设置为100%,则容易出现如下情况,整个轮播图填充了大部分页面, ...
jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一下午带晚上的jQuery/Zepto的Bootstrap轮播图插件,功能是能够根据当前较短的一边实现自适应宽度,并且 ...
css3 特效加1加2,Bootstrap轮播加上css3动画，炫酷到底！
很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件. 介绍Animate ...
Bootstrap轮播手机滑动
Bootstrap作为前端样式中最流行的响应式框架,今天萌芽在做手机界面的时候发现了一个问题,就是bootstrap的轮播样式居然不能在手机上滑动!这个问题困扰了我一天终于解决,还没解决的小伙伴一起往 ...
解决swiper轮播图显示最后一张图片问题
解决swiper轮播图显示最后一张图片问题在使用swiper进行轮播图制作使,如果是由空数组创建 data () {return {swiperList:[]}}<swiper :option ...

bootstrap轮播，播放到最后一张图片的时候，就不正确了。

bootstrap轮播，播放到最后一张图片的时候，就不正确了。相关推荐

最新文章

热门文章