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

by Posted on

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.
html5-css3-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,</p>
                                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="http://placeimg.com/1200/440/animals" style="width:100%" data-src="" alt="Second    slide">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Why do we use it?</h1>
                                <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="http://placeimg.com/1200/440/sport" style="width:100%" data-src="" alt="Third slide">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Where does it come from?</h1>
                                <p>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</p>
                                <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                            </div>
                        </div>
                    </div>
                </div>

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.

DEMO | DOWNLOAD

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 🙂



Published by admin