Skip to content

Instantly share code, notes, and snippets.

@alasomlira

alasomlira/full-width-bootstrap-carousel.markdown

Last active January 17, 2020 19:37
Show Gist options
  • Save alasomlira/5876c233b95e06962fb727482a33f6a2 to your computer and use it in GitHub Desktop.
Save alasomlira/5876c233b95e06962fb727482a33f6a2 to your computer and use it in GitHub Desktop.
Download ZIP
Full Width Bootstrap Carousel
Raw
index.html
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment