Tuesday 23 June 2020

Bootstrap Corousel


<html>
<head>
<title>Corousel</title>
<script src="jquery.min.js"></script>
<script src="transition.js"></script>
<script src="carousel.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">

</head>

<body>
<div class="container">
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target='#carousel-example-generic' data-slide-to='0' ></li><li data-target='#carousel-example-generic' data-slide-to='1' ></li><li data-target='#carousel-example-generic' data-slide-to='2' ></li>               
    </ol>
    <div class="carousel-inner">
       <div class='item active'> 
         <img  src='1.jpg' />
      </div> 
      <div class='item'> 
        <img  src='2.jpg' />
     </div> 
     <div class='item'> 
      <img  src='3.jpg' />
     </div>                      
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>

</div>
</div>
</body>
</html>


No comments:

Post a Comment