在Bootstrap 4 Beta中淡化Carousel的过渡
[英]Fade transition for Carousel in Bootstrap 4 Beta
问题描述
I'm trying to modify the new Bootstrap 4 Beta Carousel to transition from slide to slide with fade rather than a sliding action, and using CSS. 
我正在尝试修改新的Bootstrap 4 Beta Carousel以使用淡入淡出而不是滑动动作从幻灯片转换为幻灯片，并使用CSS。 I cannot get it to work. 我无法让它发挥作用。 I'm not sure if a special Javascript call is required. 我不确定是否需要特殊的Javascript调用。
Please see Codepen here: 请在这里查看Codepen：
.carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } html, body, .carousel, .carousel-inner, .carousel-inner .item { height: 100%; }
<div class="container"> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-06.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-08.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-09.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- end carousel --> </div> <!-- end container -->
Thanks 谢谢
2 个解决方案
解决方案1
2 已采纳 2017-09-29 17:46:54
Here's a solution that works with Bootstrap 4 Beta. 这是一个适用于Bootstrap 4 Beta的解决方案。
.carousel-fade .carousel-item { display: block; position: relative; opacity: 0; transition: opacity .75s ease-in-out; } .row { width: 100%; } .carousel-fade .carousel-item.active { opacity: 1; display: block; } .row { width: 100%; } .carousel { position: relative; top: 0; left: 0; background-color: lightskyblue; } .carousel-inner { background-color: pink; height: 100%; } .carousel-item { background-color: yellow; opacity: .5; /*Added clone in this line*/ } a.carousel-control-next:link, a.carousel-control-prev:link { background-color: transparent; text-decoration: none; opacity: .5; } a.carousel-control-next:hover, a.carousel-control-prev:hover { background-color: transparent; text-decoration: none; opacity: 1; } .carousel-control-next-icon, .carousel-control-prev-icon { position:relative; background-image: none; } .carousel-control-next-icon:before { top:0; left:-5px; padding-right:10px; } .carousel-control-prev-icon:before { top:0; left:-5px; padding-right:10px; } .sidebar { background-color: #e1e1e1; }
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> </head> <div class="container"> <div class="row"> <div class="col-lg-8"> <div id="carousel" class="carousel carousel-fade" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="https://i.imgur.com/FmtTabr.jpg" alt="First slide"> </div> <!-- close carousel-item 1 --> <div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%"> <img class="d-block w-100" src="https://i.imgur.com/UioJ4ix.jpg" alt="Second slide"> </div> <!-- close carousel-item 2 --> <div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%"> <img class="d-block w-100" src="https://i.imgur.com/UkPZYcB.jpg" alt="Third slide"> </div> <!-- close carousel-item 3 --> </div> <!-- close carousel-inner --> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- close carousel --> <table class="table table-bordered mt-3"> <thead class="thead-default"> <tr> <th colspan="2" class="text-center">Table head</th> </tr> </thead> <tbody> <tr> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> </tr> </tbody> </table> </div> <!-- end col-lg-8 --> <div class="col-lg-4 sidebar"> <p>Sidebar</p> </div> <!-- close sidebar --> </div> <!-- close row --> </div> <!-- close container --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
解决方案2
1 2018-03-14 16:19:45
Here's a solution that works with Bootstrap 4 Stable Released 这是一个适用于Bootstrap 4 Stable Released的解决方案
Starting from this theme: https://startbootstrap.com/template-overviews/full-slider/ 从这个主题开始： https ： //startbootstrap.com/template-overviews/full-slider/
#image1 { background-image: url('http://via.placeholder.com/1440x813'); } #image2 { background-image: url('http://via.placeholder.com/1440x813'); } #image3 { background-image: url('http://via.placeholder.com/1440x813'); } .carousel-item { height: 100vh; min-height: 300px; background-image: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .carousel.fade { opacity: 1; } .carousel.fade .carousel-item { -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; left: 0 !important; opacity: 0; top: 0; position: absolute; width: 100%; display: block !important; z-index: 1; } .carousel.fade .carousel-item:first-child { top: auto; position: relative; } .carousel.fade .carousel-item.active { opacity: 1; -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; z-index: 2; } .carousel-control-next, .carousel-control-prev { z-index: 10; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Full Slider - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="css/full-slider.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <header> <div id="carouselExampleIndicators" class="carousel fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div id="image1" class="carousel-item active"> <div class="carousel-caption d-none d-md-block"> <h3>First Slide</h3> <p>This is a description for the first slide.</p> </div> </div><!-- #image1 --> <div id="image2" class="carousel-item"> <div class="carousel-caption d-none d-md-block"> <h3>Second Slide</h3> <p>This is a description for the second slide.</p> </div> </div><!-- #image2 --> <div id="image3" class="carousel-item"> <div class="carousel-caption d-none d-md-block"> <h3>Third Slide</h3> <p>This is a description for the third slide.</p> </div> </div><!-- #image3 --> </div><!-- .carousel-inner --> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div><!-- carouselExampleIndicators --> </header> <!-- Page Content --> <section class="py-5"> <div class="container"> <h1>Full Slider by Start Bootstrap</h1> <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>full-slider.css</code> file. </p> </div> </section> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © Your Website 2018</p> </div> <!-- /.container --> </footer> <!-- Bootstrap core JavaScript --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
twitter bootstrap的旋转木马淡出过渡 - twitter bootstrap's carousel fade transition
如何更改Bootstrap的轮播从幻灯片到淡入淡出的过渡 - How to change Bootstrap's carousel transition from slide to fade
Bootstrap Carousel Text Fade - Bootstrap Carousel Text Fade
引导轮播内容消失 - Bootstrap carousel content fade
OWL 轮播淡入淡出过渡速度 - OWL Carousel Fade Transition Speed
渐隐至黑色过渡的图像轮播 - Image Carousel with Fade to Black Transition
Bootstrap轮播缩放过渡 - Bootstrap carousel zoom transition
使用Bootstrap 3 Carousel来改变背景图像，任何平滑淡入过渡的想法？ - Using Bootstrap 3 Carousel to change background image, any ideas for smooth fade transition?
使用引导文本轮播淡入和淡出背景 - Fade in and fade out background with bootstrap text carousel
猫头鹰旋转木马褪色不适用于引导程序 4 - Owl carousel fade not working with bootstrap 4
相关标签