如何将 Bootstrap 轮播幻灯片效果更改为淡入淡出效果

Question

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h

如何将Bootstrap轮播幻灯片效果改为淡入淡出效果？

Answer 1

试试这个代码的 Bootstrap Fade 效果滑块，并在 Codepen 中查看我的示例

.carousel-caption{
  padding-bottom:100px;
}
.rw-words-1 span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #f65a3a;
	font-weight:400 !important;
	-webkit-animation: rotateWord 18s linear infinite 0s;
	-ms-animation: rotateWord 18s linear infinite 0s;
	animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
	color: #0d9b56;
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #f65a3a;	
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
	color:#0d9b56;
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
	5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
	20% { opacity: 0; -ms-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
.rw-words{
	display: inline;
	text-indent: 10px;
}
.agileits-banner-info span {
    color: #fff;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 700;
    text-align: left !important;
}

.agileits_w3layouts_more a {
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    background:#0d9b56;
    padding: .7em 2em;
    display: inline-block;
    margin-top: 40px;
	border-radius:2px;
}
.agileits_w3layouts_more a:focus{
	outline:none;
}
.agileits_w3layouts_more a:hover{
	background:#f65a3a;
}
.agileits_w3layouts_more.menu__item {
    text-align: center;
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4500">
    
    <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">
      <div class="item active">
       
        <img src="http://www.script-tutorials.com/demos/284/images/pic1.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
           <div class="agileits-banner-info bannertext-desktop">
					<span>A Powerful But Simple Way to Manage Your  </span>
					<div class="rw-words rw-words-1">
						<span>Company</span>
						<span> People</span>
						<span>Happiness</span>
						<span>Wonder</span>
					</div>
					<div class="agileits_w3layouts_more menu__item">
						<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
					</div>
          </div>	
          
        </div>
      </div>
    <div class="item">
        <img src="http://www.script-tutorials.com/demos/284/images/pic2.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <div class="agileits-banner-info bannertext-desktop">
					<span>A Powerful But Simple Way to Manage Your  </span>
					<div class="rw-words rw-words-1">
						<span>Company</span>
						<span> People</span>
						<span>Happiness</span>
						<span>Wonder</span>
					</div>
					<div class="agileits_w3layouts_more menu__item">
						<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
					</div>
          </div>	
          
        </div>
      </div>
      <div class="item">
        <img src="http://www.script-tutorials.com/demos/284/images/pic3.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
           <div class="agileits-banner-info bannertext-desktop">
					<span>A Powerful But Simple Way to Manage Your  </span>
					<div class="rw-words rw-words-1">
						<span>Company</span>
						<span> People</span>
						<span>Happiness</span>
						<span>Wonder</span>
					</div>
					<div class="agileits_w3layouts_more menu__item">
						<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
					</div>
          </div>	
          
        </div>
      </div>
 </div>
  
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
</div>