HTML 5 TutorialsLearn to implement image slider using bootstrap

Learn to implement image slider using bootstrap

Today in this tutorial, we will learn to implement image slider using bootstrap, similarly we will learn how to create content slider called as carousel using the same technique.

  • So to, learn to implement image slider using bootstrap follow the steps given below :

  1. First of all visit the getbootstrap.com website .
  2. Click on Download link .
  3. Download the latest version of the bootstrap which will be in zip format .
  4. Just Extract the downloaded zip bundle .
  5. After extracting the folder you will have following contents in it :
  6. bootstrap

  7. In this downloaded folder lets create index.html and style.css file and an img folder to save the images.
  8. Hence you will have following view of your window :
  9. slider using bootstrap

  10. Let’s learn to implement image slider using bootstrap.
  11. Now open the index.html file with any text editor like Notepad++ and write the following code in it :
  12. <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
    
        <title>Carousel for Bootstrap</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
         <link href="style.css" rel="stylesheet">
       </head>
    
      <body>
    
    
        <!--couresel -->
    	        <!--carousel image slider-->
        <div id="myCarousel" class="carousel slide">
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
              <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <img src="img/slide1.jpg" class="img-responsive">
    			<div class="carousel-caption">
    				<h3>Anroid</h3>
    				<p>hi welcome to Anroid</p>
                   </div>
              </div>
    
              <div class="item">
                  <img src="img/slide2.jpg" class="img-responsive">
    			   <div class="carousel-caption">
    				<h3>WEB DESING</h3>
    				<p>hi welcome to web design</p>
                   </div>
              </div>
              <div class="item">
                <img src="img/slide3.jpg" class="img-responsive">
    			<div class="carousel-caption">
    				<h3>PHP</h3>
    				<p>hi welcome to PHP</p>
                   </div>
              </div>
    
              <div class="item">
                  <img src="img/slide4.jpg" class="img-responsive">
    			  <div class="carousel-caption">
    				<h3>Asp</h3>
    				<p>hi welcome to ASP</p>
                   </div>
              </div>
    
            </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="icon-prev"></span></a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="icon-next"></span></a>
    
      </div>
    
        <!--End couresel -->
    
        <div class="container">
    
          
    
        </div>
    <!-- /.container -->
    
    
    
    
        <!-- Bootstrap core JavaScript============== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    

  13. Thus when you run your index.html file you will have the following output :
  14. slider image

  15. You can also use the content slider if you want to insert some text inside the slider.
  16. For this just replace the code of the index.html file with the following one :
  17. <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
    
        <title>Carousel for Bootstrap</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
         <link href="style.css" rel="stylesheet">
       </head>
    
      <body>
     <!--carousel-->
        <div id="myCarousel" class="carousel slide jumbotron">
          <div class="container">
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
              <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <h1>Web Design</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p>
                <a  href="#" class="btn btn-success btn-lg">Learn More..</a>
              </div>
              <div class="item">
                <h1>Web Developments</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p>
                <a  href="#" class="btn btn-success btn-lg">Learn More..</a>
                
              </div>
              <div class="item">
                <h1>Wordpress Devlopment</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p>
                <a  href="#" class="btn btn-success btn-lg">Learn More..</a>
                
              </div>
              <div class="item">
                <h1>PHP Devlopment</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p>
                <a  href="#" class="btn btn-success btn-lg">Learn More..</a>
                
              </div>
    
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="icon-prev"></span></a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="icon-next"></span></a>
    
      </div>
        <!--End carousel-->
    	
    	 <!-- Bootstrap core JavaScript============= -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    	</body>
    	</html>
    

  18. Hence, when you run index.html file now, you will have the following output :
  19. output of bootstrap

  20. To add style to our slider just in your style.css file write the given code :
  21. style.css file

  22. Hence, after adding style we will have the following output :
  23. bootstrap output

  24. Hence, we have successfully learnt to implement image slider using bootstrap.
Previous articleXML Fundamentals
Next articleXML with DTD Schema

1 COMMENT

  1. An interesting discussion is definitely worth
    comment. I do believe that you should write more
    on this subject matter, it might not be a taboo subject but generally people do not talk about these subjects.
    To the next! All the best!!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -