Bootstrap Full Screen Carousel with Fading Transition

Bootstrap Full screen carousel with fading transitions. This code snippet offer a CSS based fading transition for Bootstrap default carousel.

Plugin Overview

Plugin: bootstrap-carousel-fade-transition
Author: Roland Warmerdam
Licence: MIT Licence
Published: March 20, 2019
Repository: Fork on CodePen
Dependencies: jQuery 2.1.3 or Latest version and Bootstrap 3.3.5 or Latest
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 4 KB

How to Use Bootstrap Full Screen Carousel :

1. First of all load the Normalize CSS, Bootstrap Framework and jQuery into HTML document.

<!--Normalize CSS-->
<link rel="stylesheet" href="">

<!--Bootstrap CSS-->
<link rel='stylesheet' href=''>

<script src=''></script>

<!--Bootstrap Js-->
<script src=''></script>

2. After that, include style.css for fade effects in Bootstrap Carousel.

<!--Fading CSS for Bootstrap Carousel-->
<link rel="stylesheet" href="css/style.css">

2. Create HTML structure for Bootstrap Carousel & add your images links in it.

 <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    <!--Fading transition Carousel items -->
    <div class="carousel-inner">
        <div class="active item"><img src=""></div>
        <div class="item"><img src=""></div>
        <div class="item"><img src=""></div>
    <!--Fading transition Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">›</a>

3. Finally initialize the Carousel in jQuery document ready function.




Be the first to comment

Leave a Reply

Your email address will not be published.


fifteen + 15 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.