How To Create Responsive Full Width Carousel / Slider with Bootstrap 3, HTML5 and jQuery

I found a wonderful script on internet to create a fully responsive and full width content auto carousel/slider which is created by Rabin Awal in Bootstrap 3, HTML5 and jQuery. I thought i should share this awesome code snippets with you. For creating Responsive Full Width Carousel / Slider You don’t need any third party slider plugin you can simply use Bootstrap 3, HTML5 and jQuery to build own Responsive Full Width Carousel / Slider.

Create Responsive Full Width Carousel / Slider with Bootstrap 3, HTML5 and jQuery

Step-1: Fist of all requited libraries on page like bootstrap and jquery because following Carousel / Slider dependent on bootstrap and jquery.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js">script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">script>
head>

Step-2: Simply Create a bottom indicator for your content carousel/Slider. you can define any slider as active by adding class=”active”.

<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>

Step-3: This section you need to add background image and small descriptive text for you each carousel/Slider which will better define each slide of carousel.

   <div class="carousel-inner">
                    <div class="item active">
                        <img src="http://placeimg.com/1200/440/people" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>What is Lorem Ipsum?h1>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                Sign up today
                            
                        
                    
                    
                        
                        
                            
                                
                                t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                Learn more
                            
                        
                    
                    
                        
                        
                            
                                
                                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old
                                Browse gallery

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Learn more

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old

Browse gallery

Step-4: As this carousel automatically movable but you can also create navigation arrows for your content carousel to move slider next and previous by clicking on below navigation buttons.

<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left">span>a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right">span>a>
            div>

See online Demo and Download Source Code.

Hope you liked this post to Create Responsive Full Width Carousel / Slider with Bootstrap 3, HTML5 and jQuery, For more awesome tutorial don’t forget to subscribe My Public Notebook.
Have A Nice Day 🙂