Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Carousel / Css / Javascript

Fade Transition For Carousel In Bootstrap 4 Beta

Post a Comment
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. I cannot get it to work. I'm not sur

Solution 1:

Here's a solution that works with 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><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></head><divclass="container"><divclass="row"><divclass="col-lg-8"><divid="carousel"class="carousel carousel-fade"data-ride="carousel"><divclass="carousel-inner"role="listbox"><divclass="carousel-item active"><imgclass="d-block w-100"src="https://i.imgur.com/FmtTabr.jpg"alt="First slide"></div><!-- close carousel-item 1 --><divclass="carousel-item"style="position: absolute; top:0px; width: 100% ; height: 100%"><imgclass="d-block w-100"src="https://i.imgur.com/UioJ4ix.jpg"alt="Second slide"></div><!-- close carousel-item 2 --><divclass="carousel-item"style="position: absolute; top:0px; width: 100% ; height: 100%"><imgclass="d-block w-100"src="https://i.imgur.com/UkPZYcB.jpg"alt="Third slide"></div><!-- close carousel-item 3 --></div><!-- close carousel-inner --><aclass="carousel-control-prev"href="#carousel"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carousel"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div><!-- close carousel --><tableclass="table table-bordered mt-3"><theadclass="thead-default"><tr><thcolspan="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 --><divclass="col-lg-4 sidebar"><p>Sidebar</p></div><!-- close sidebar --></div><!-- close row --></div><!-- close container --><scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"crossorigin="anonymous"></script>

Solution 2:

Here's a solution that works with Bootstrap 4 Stable Released

Starting from this theme: 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><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><metaname="description"content=""><metaname="author"content=""><title>Full Slider - Start Bootstrap Template</title><!-- Bootstrap core CSS --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin="anonymous"><!-- Custom styles for this template --><linkhref="css/full-slider.css" ></head><body><!-- Navigation --><navclass="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"><divclass="container"><aclass="navbar-brand"href="#">Start Bootstrap</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarResponsive"><ulclass="navbar-nav ml-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home
							<spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">About</a></li><liclass="nav-item"><aclass="nav-link"href="#">Services</a></li><liclass="nav-item"><aclass="nav-link"href="#">Contact</a></li></ul></div></div></nav><header><divid="carouselExampleIndicators"class="carousel fade"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#carouselExampleIndicators"data-slide-to="0"class="active"></li><lidata-target="#carouselExampleIndicators"data-slide-to="1"></li><lidata-target="#carouselExampleIndicators"data-slide-to="2"></li></ol><divclass="carousel-inner"role="listbox"><divid="image1"class="carousel-item active"><divclass="carousel-caption d-none d-md-block"><h3>First Slide</h3><p>This is a description for the first slide.</p></div></div><!-- #image1 --><divid="image2"class="carousel-item"><divclass="carousel-caption d-none d-md-block"><h3>Second Slide</h3><p>This is a description for the second slide.</p></div></div><!-- #image2 --><divid="image3"class="carousel-item"><divclass="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 --><aclass="carousel-control-prev"href="#carouselExampleIndicators"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleIndicators"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div><!-- carouselExampleIndicators --></header><!-- Page Content --><sectionclass="py-5"><divclass="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 --><footerclass="py-5 bg-dark"><divclass="container"><pclass="m-0 text-center text-white">Copyright &copy; Your Website 2018</p></div><!-- /.container --></footer><!-- Bootstrap core JavaScript --><scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script></body></html>

Post a Comment for "Fade Transition For Carousel In Bootstrap 4 Beta"