Skip to content

Instantly share code, notes, and snippets.

@NigelRodgers

NigelRodgers/index.html

Created April 2, 2017 14:20
Show Gist options
  • Save NigelRodgers/6e2dfbc5c89f39a123858da093f9a3dc to your computer and use it in GitHub Desktop.
Save NigelRodgers/6e2dfbc5c89f39a123858da093f9a3dc to your computer and use it in GitHub Desktop.
Download ZIP
Jquery booststrap responsive full width slider carousel
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery &amp; 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>
@NigelRodgers
Copy link
Author

NigelRodgers commented Apr 2, 2017 •
edited
Loading

View the original responsive bootstrap slider taken from jqueryscript.net
Will be using this slider to build a wordpress plugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment