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: January 19, 2024
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="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<!--Bootstrap CSS-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>

<!--jQuery-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<!--Bootstrap Js-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js'></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>
    </ol>
    <!--Fading transition Carousel items -->
    <div class="carousel-inner">
        <div class="active item"><img src="https://source.unsplash.com/1280x800/?girl"></div>
        <div class="item"><img src="https://source.unsplash.com/1280x800/?bikni"></div>
        <div class="item"><img src="https://source.unsplash.com/1280x800/?car"></div>
    </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>
</div>
</div>

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

$(document).ready(function(){

$('.carousel').carousel();

});

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...