Created
April 10, 2017 13:54
-
-
Save silgon/19daaa633c2ccf810c846bda0598d122 to your computer and use it in GitHub Desktop.
Example Carousel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> | |
| <title>Example of Bootstrap 3 Carousel</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
| <style type="text/css"> | |
| .carousel{ | |
| background: #AAAAAA; | |
| margin-top: 20px; | |
| } | |
| .carousel .item img{ | |
| margin: 0 auto; /* Align slide image horizontally center */ | |
| } | |
| .bs-example{ | |
| margin: 20px; | |
| } | |
| .item{ | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bs-example"> | |
| <div id="myCarousel" class="carousel slide" data-ride="carousel"> | |
| <!-- Carousel indicators --> | |
| <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> | |
| <!-- Wrapper for carousel items --> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <img src="" class="img-fluid" alt="First Slide"> | |
| </div> | |
| <div class="item"> | |
| <img src=".." class="img-fluid" alt="Second Slide"> | |
| </div> | |
| <div class="item"> | |
| <img src=".." class="img-fluid" alt="Third Slide"> | |
| </div> | |
| </div> | |
| <!-- Carousel controls --> | |
| <a class="carousel-control left" href="#myCarousel" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left"></span> | |
| </a> | |
| <a class="carousel-control right" href="#myCarousel" data-slide="next"> | |
| <span class="glyphicon glyphicon-chevron-right"></span> | |
| </a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment