How to add Bootstrap Carousel slider

Introduction:

 Here i am going to explain how to add bootstrap Carousel plugin slider into your website. You can read my previous article to read how to implement bootstrap.


Steps: 

2. <div id="myCarousel" class="carousel slide" data-ride="carousel">
3.   <!-- Indicators -->
4.   <ol class="carousel-indicators">
5.     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
6.     <li data-target="#myCarousel" data-slide-to="1"></li>
7.     <li data-target="#myCarousel" data-slide-to="2"></li>
8.     <li data-target="#myCarousel" data-slide-to="3"></li>
9.   </ol>
10. 
    
11.   <!-- slides -->
12.   <div class="carousel-inner" role="listbox">
13.     <div class="item active">
14.       <img src="img/img_chania.jpg" alt="Chania">
15.     </div>
16. 
    
17.     <div class="item">
18.       <img src="img/img_chania2.jpg" alt="Chania">
19.     </div>
20. 
    
21.     <div class="item">
22.       <img src="img/img_flower.jpg" alt="Flower">
23.     </div>
24. 
    
25.     <div class="item">
26.       <img src="img/img_flower2.jpg" alt="Flower">
27.     </div>
28.   </div>
29. 
    
30.  
31.   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
32.     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
33.     <span class="sr-only">Previous</span>
34.   </a>
35.   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
36.     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
37.     <span class="sr-only">Next</span>
38.   </a>
39. </div>