Created
April 2, 2017 14:20
-
-
Save NigelRodgers/6e2dfbc5c89f39a123858da093f9a3dc to your computer and use it in GitHub Desktop.
Jquery booststrap responsive full width slider 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jQuery & Bootstrap Carousel Demo</title> | |
| <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <h1 style="margin-bottom:30px" align="center">jQuery & Bootstrap Carousel Demo</h1> | |
| <div id="myCarousel" class="carousel slide" data-ride="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> | |
| <div class="carousel-inner"> | |
| <div class="item active"> <img src="http://lorempixel.com/1200/400/sports" style="width:100%" alt="First slide"> | |
| <div class="container"> | |
| <div class="carousel-caption"> | |
| <h1>Slide 1</h1> | |
| <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p> | |
| <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> <img src="http://lorempixel.com/1200/400/people" style="width:100%" data-src="" alt="Second slide"> | |
| <div class="container"> | |
| <div class="carousel-caption"> | |
| <h1>Slide 2</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p> | |
| <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> <img src="http://lorempixel.com/1200/400/abstract" style="width:100%" data-src="" alt="Third slide"> | |
| <div class="container"> | |
| <div class="carousel-caption"> | |
| <h1>Slide 3</h1> | |
| <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p> | |
| <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
View the original responsive bootstrap slider taken from jqueryscript.net
Will be using this slider to build a wordpress plugin