2016-02-21 48 views
2

我一直在引导转盘上挣扎几天,应该像默认的那样向左/向右滑动,但增加了衰落(新物品在进入时缓慢增加不透明度并且前一个物品缓慢失去透明度移动时出来),我尝试过许多变化,但他们中的一些不工作在Firefox,其他保持在歌剧等Bootstrap传送带滑动与衰落+滑动

这里失败是HTML:

<section> 
    <div class="container"> 
     <h2>Some title</h2> 
     <div class="row"> 
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
       <p>Some text</p> 
       <div class="ingo col-sm-8 col-sm-offset-2"> 
        <div id="pubCarousel" class="carousel slide" data-ride="carousel"> 

         <div class="carousel-inner" role="listbox"> 
          <div class="item active"> 
           <img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/> 
           <h3 class="name longn">Carousel text</h3> 
          </div> 

          <div class="item"> 
           <img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/> 
           <h3 class="name">Carousel text</h3> 
          </div> 
         </div> 

         <div class="pub-counter"> 
          <p class="counter-line"></p> 
         </div> 

         <!-- Left and right controls --> 
         <a class="left carousel-control" href="#pubCarousel" role="button" data-slide="prev"> 
          <span class="sr-only">Previous</span> 
         </a> 
         <a class="right carousel-control" href="#pubCarousel" role="button" data-slide="next"> 
          <span class="sr-only">Next</span> 
         </a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

这里我的传送带设置不起作用(我知道现在不好,我尝试了10个解决方案,但它无法工作),其余的传送带默认设置为:

.ingo .carousel-inner>.item { 
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity 2s ease-in-out; 
    -moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out; 
    -o-transition: -o-transform 1s ease-in-out, opacity 2s ease-in-out; 
    transition: transform 1s ease-in-out, opacity 2s ease-in-out; 
} 
.ingo .carousel-inner>.item.active,.ingo .carousel-inner>.item.active { 
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity .5s ease-in-out; 
    -moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out; 
    -o-transition: -o-transform 1s ease-in-out, opacity .5s ease-in-out; 
    transition: transform 1s ease-in-out, opacity 2s ease-in-out; 
} 
.ingo .carousel .item { 
    opacity:0; 
} 
.ingo .carousel .carousel-inner .active { 
    opacity: 1; 
} 
.ingo .carousel .carousel-inner .next, 
.ingo .carousel .carousel-inner .prev 
.ingo .carousel .carousel-inner .active.left, 
.ingo .carousel .carousel-inner .active.right { 
    left: 0; 
    opacity: 0; 
} 
.ingo .carousel .carousel-inner .next.left, 
.ingo .carousel .carousel-inner .prev.right { 
    opacity: 1; 
} 

我没有使用任何JS修改。我希望这个答案不会重复一些已经发布的问题,我只是找不到解决方案。

感谢所有帮助的人,非常感谢。

回答

1

经过很多努力,我终于得到了幻灯片+淡入淡出效果,我也发现这个Stackoverflow主题Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition,但是任何发布的解决方案都不适用于每个浏览器 - 尤其是Firefox遇到了很多麻烦。所以有一个解决方案。希望这可以帮助某人。

.ingo .carousel .carousel-inner .item { 
    -webkit-transition: all 1.1s ease-in-out, opacity 1s ease-in; 
    -moz-transition: all 1.1s ease-in-out, opacity 1s ease-in; 
    -ms-transition: all 1.1s ease-in-out, opacity 1s ease-in; 
    -o-transition: all 1.1s ease-in-out, opacity 1s ease-in; 
    transition: all 1.1s ease-in-out, opacity 1s ease-in; 
} 
.ingo .carousel .carousel-inner .item, 
.ingo .carousel .carousel-inner .active.left, 
.ingo .carousel .carousel-inner .active.right { 
    opacity: 0 !important; 
} 
.ingo .carousel .carousel-inner .active, 
.ingo .carousel .carousel-inner .next.left, 
.ingo .carousel .carousel-inner .prev.right { 
    opacity: 1 !important; 
} 
.#pubCarousel.carousel .carousel-control { 
    z-index: 2 !important; 
} 
0

尝试这一个,并检查示例代码HERE

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

 
.agileits_w3layouts_more a { 
 
    font-size: 1.1em; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    background:#0d9b56; 
 
    padding: .7em 2em; 
 
    display: inline-block; 
 
    margin-top: 40px; 
 
\t border-radius:2px; 
 
} 
 
.agileits_w3layouts_more a:focus{ 
 
\t outline:none; 
 
} 
 
.agileits_w3layouts_more a:hover{ 
 
\t 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"> 
 
\t \t \t \t \t <span>A Powerful But Simple Way to Manage Your </span> 
 
\t \t \t \t \t <div class="rw-words rw-words-1"> 
 
\t \t \t \t \t \t <span>Company</span> 
 
\t \t \t \t \t \t <span> People</span> 
 
\t \t \t \t \t \t <span>Happiness</span> 
 
\t \t \t \t \t \t <span>Wonder</span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="agileits_w3layouts_more menu__item"> 
 
\t \t \t \t \t \t <a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a> 
 
\t \t \t \t \t </div> 
 
      </div> \t 
 
      
 
     </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"> 
 
\t \t \t \t \t <span>A Powerful But Simple Way to Manage Your </span> 
 
\t \t \t \t \t <div class="rw-words rw-words-1"> 
 
\t \t \t \t \t \t <span>Company</span> 
 
\t \t \t \t \t \t <span> People</span> 
 
\t \t \t \t \t \t <span>Happiness</span> 
 
\t \t \t \t \t \t <span>Wonder</span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="agileits_w3layouts_more menu__item"> 
 
\t \t \t \t \t \t <a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a> 
 
\t \t \t \t \t </div> 
 
      </div> \t 
 
      
 
     </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"> 
 
\t \t \t \t \t <span>A Powerful But Simple Way to Manage Your </span> 
 
\t \t \t \t \t <div class="rw-words rw-words-1"> 
 
\t \t \t \t \t \t <span>Company</span> 
 
\t \t \t \t \t \t <span> People</span> 
 
\t \t \t \t \t \t <span>Happiness</span> 
 
\t \t \t \t \t \t <span>Wonder</span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="agileits_w3layouts_more menu__item"> 
 
\t \t \t \t \t \t <a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a> 
 
\t \t \t \t \t </div> 
 
      </div> \t 
 
      
 
     </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>