html – 如何使用Bootstrap轮播显示上一张和下一张图像

概述我正在寻找的效果可以在下面的图像中看到,它是一个有3张图像的旋转木马. 如何让bootstrap carousel显示不透明度为0.7的左右图像？ 以下是我的轮播模板. <div class="col-md-10 center-block"> <img id="logo" src="./img/yoox_group.png" alt="yoog group" /> <div id 我正在寻找的效果可以在下面的图像中看到,它是一个有3张图像的旋转木马.

如何让bootstrap carousel显示不透明度为0.7的左右图像？

以下是我的轮播模板.

<div >    <img ID="logo" src="./img/yoox_group.png" alt="yoog group" />    <div ID="carousel-example-generic"  data-rIDe="carousel">        <!-- Indicators -->        <ol >            <li data-target="#carousel-example-generic" data-slIDe-to="0" ></li>            <li data-target="#carousel-example-generic" data-slIDe-to="1"></li>            <li data-target="#carousel-example-generic" data-slIDe-to="2"></li>        </ol>        <!-- Wrapper for slIDes -->        <div  role="@R_502_6818@Box">            <div >                <img src="./img/carousel/carousel-001.jpg" alt="..." />                <div >                </div>            </div>            <div >                <img src="./img/carousel/carousel-002.jpg" alt="..." />                <div >                </div>            </div>            <div >                <img src="./img/carousel/carousel-003.jpg" alt="..." />                <div >                </div>            </div>        </div>        <!-- Controls -->        <a  href="#carousel-example-generic" role="button" data-slIDe="prev">            <img ID="arrowleft" src="./img/arrow_left.png" />            <span >PrevIoUs</span>        </a>        <a  href="#carousel-example-generic" role="button" data-slIDe="next">            <img ID="arrowright" src="./img/arrow_right.png" />            <span >Next</span>        </a>    </div></div>

#arrowleft {    background-color: #FFF;    padding: 10px 8px;    position: absolute;    margin-left: -95px;    top: 45%;    z-index: 5;    display: inline-block;}#arrowright {    background-color: #FFF;    padding: 10px 8px;    position: absolute;    margin-left: 67px;    top: 45%;    z-index: 5;    display: inline-block;}

解决方法 将 this answer扩展到另一个问题,如果您将以下CSS添加到您的代码中,它将提供您正在寻找的效果.

我们基本上必须将.carousel-inner扩展为大于.carousel,然后将其居中并隐藏.carousel的溢出.

为了获得不透明效果,我们扩展上一个和下一个箭头容器的大小,然后设置半透明的白色背景.

bootstrap> = 3.3.0

在bootstrap版本3.3.0 there was a change in the CSS which invalidated the previous method中.所以这是当前的方法.

(Demo)

.carousel {    overflow: hIDden;}.carousel-inner {    wIDth: 150%;    left: -25%;}.carousel-inner > .item.next,.carousel-inner > .item.active.right {    -webkit-transform: translate3d(33%,0);    transform: translate3d(33%,0);}.carousel-inner > .item.prev,.carousel-inner > .item.active.left {    -webkit-transform: translate3d(-33%,0);    transform: translate3d(-33%,0);}.carousel-control.left,.carousel-control.right {    background: rgba(255,255,0.3);    wIDth: 25%;}

bootstrap< 3.3.0 (Demo)

.carousel {    overflow: hIDden;}.carousel-inner {    wIDth: 150%;    left: -25%;}.carousel-inner .active.left {    left: -33%;}.carousel-inner .next {    left: 33%;}.carousel-inner .prev {    left: -33%;}.carousel-control.left,0.3);    wIDth: 25%;}

总结

以上是内存溢出为你收集整理的html – 如何使用Bootstrap轮播显示上一张和下一张图像全部内容，希望文章能够帮你解决html – 如何使用Bootstrap轮播显示上一张和下一张图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。