home

Bootstrap Marketing Banner (carousel)

In this article you going learn how to create carousel banner (marketing banner area), this will allow you to create text slider and image slide and more. Why carousel is required for website, and main reason is for any website this is main marketing place to advertise about organization (you can use services list or content with images and more). Probably every user will see the banner area, because its standard as a marketing place also most highlighted place in entire website this will describes about what you are and what you will do (like services and other things which you do).

Getting into banner code

Let’s have looking in to our marketing banner code. This banner is required an id called myCarousel to get controllability on carousel banner, and another class contained the same div (class name is carousel), it just has height of the slider (you can give based on the requirement) one more class (slide class) in the same div tag, slide class will create kind of smooth animation while slides are rotates.

Carousel-indicators are the having the list of items to rotate in order, and another most important assets of banner is descript of each slide, so to writes each item will have to write carousel-inner class and item class and to activate first slide we need to use activate class.

In the conclusion of this banner section we have next and previous button (a = anchor links) which you can control slider image by clicking on the buttons.

<!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
    <body>
      <div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
!-- Carousel items -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>

<div class="item">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
</div>

<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div></div> </body> </html>