大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap-3 – 想要Bootstrap 3轮播显示上一张和下一张图片的一部分,以填充宽度100％，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
使用标准的Bootstrap轮播代码：
<ol class="carousel-inDicators"> <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 class="carousel-inner center-block" style="width:80%;max-width:960px;" > <div class="item active"> <img src="/images/slide-fpo.png" style="width:100%" alt="First slide"> <div class="container"> <div class="carousel-caption"> <h1>Slide 1</h1> <!-- <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p> <p><a class="btn btn-lg btn-priMary" href="#" role="button">Sign up today</a></p> --> </div> </div> </div> <div class="item"> <img src="/images/slide-fpo.png" style="width:100%" src="" alt="Second slide"> <div class="container"> <div class="carousel-caption"> <h1>Slide 2</h1> <!-- <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed vitae egestas purus. </p> <p><a class="btn btn-lg btn-priMary" href="#" role="button">Learn more</a></p> --> </div> </div> </div> <div class="item"> <img src="/images/slide-fpo.png" style="width:100%" src="" alt="Third slide"> <div class="container"> <div class="carousel-caption"> <h1>Slide 3</h1> <!-- <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p> <p><a class="btn btn-lg btn-priMary" href="#" role="button">Browse gallery</a></p> --> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>
首先给每个div.item三个图像(prevIoUs,current,next)：
<div class="item active">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
</div>
然后使用以下Less代码：
@import "bootstrap-3.3.2/less/variables"; @image-width: 600px; .item img { max-width:100%; &:first-child,&:last-child { display: none; } } /* small devices (tablets,768px and up) */ @media (min-width: @screen-sm-min) { @rest: ((@screen-sm - ( 2 * @grid-gutter-width)) - @image-width); .item img { float:left; &:first-child,&:last-child { display: block; } width: @image-width; } .item.active { overflow:hidden; margin: 0 ((@image-width - (@rest / 2 ) ) * -1); } } /* Medium devices (desktops,992px and up) */ @media (min-width: @screen-md-min) { @rest: ((@screen-md - ( 2 * @grid-gutter-width)) - @image-width); .item img { width: @image-width; } .item.active { margin: 0 ((@image-width - (@rest / 2 ) ) * -1); } } /* Large devices (large desktops,1200px and up) */ @media (min-width: @screen-lg-min) { @rest: ((@screen-lg - ( 2 * @grid-gutter-width)) - @image-width); .item img { width: @image-width; } .item.active { margin: 0 ((@image-width - (@rest / 2 ) ) * -1); } }
在上面设置@ image-width到滑块图像的宽度.前面的Less代码编译成以下CSS代码：
.item img { max-width: 100%; } .item img:first-child,.item img:last-child { display: none; } /* small devices (tablets,768px and up) */ @media (min-width: 768pX) { .item img { float: left; width: 600px; } .item img:first-child,.item img:last-child { display: block; } .item.active { overflow: hidden; margin: 0 -546px; } } /* Medium devices (desktops,992px and up) */ @media (min-width: 992pX) { .item img { width: 600px; } .item.active { margin: 0 -434px; } } /* Large devices (large desktops,1200px and up) */ @media (min-width: 1200pX) { .item img { width: 600px; } .item.active { margin: 0 -330px; } }
演示：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <style> .item img { max-width: 100%; } .item img:first-child,1200px and up) */ @media (min-width: 1200pX) { .item img { width: 600px; } .item.active { margin: 0 -330px; } </style> <div class="container"> <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 class="" data-target="#carousel-example-generic" data-slide-to="1"></li> <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listBox"> <div class="item active"> <img src="http://dummyimage.com/600x400/000/fff" alt="" /> <img src="http://dummyimage.com/600x400/ff0/fff" alt="" /> <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" /> </div> <div class="item"> <img src="http://dummyimage.com/600x400/ff0/fff" alt="" /> <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" /> <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" /> </div> <div class="item"> <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" /> <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" /> <img src="http://dummyimage.com/600x400/000/fff" alt="" /> </div> <div class="item"> <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" /> <img src="http://dummyimage.com/600x400/000/fff" alt="" /> <img src="http://dummyimage.com/600x400/ff0/fff" alt="" /> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">PrevIoUs</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
以上是大佬教程为你收集整理的twitter-bootstrap-3 – 想要Bootstrap 3轮播显示上一张和下一张图片的一部分,以填充宽度100％全部内容，希望文章能够帮你解决twitter-bootstrap-3 – 想要Bootstrap 3轮播显示上一张和下一张图片的一部分,以填充宽度100％所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。