Skip to content

Instantly share code, notes, and snippets.

@adamfknapp

adamfknapp/index.html

Created December 12, 2020 15:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamfknapp/e2f8e7b96495731c6804955f7afe6199 to your computer and use it in GitHub Desktop.
Save adamfknapp/e2f8e7b96495731c6804955f7afe6199 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Bootstrap Carousel
Raw
index.html
<div class="wrap">
<div id="myCarousel" class="carousel slide" data-ride="slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/750x450/3498db/ffffff" width="100%">
</div>
<div class="item">
<img src="http://placehold.it/750x450/e74c3c/ffffff" width="100%">
</div>
<div class="item">
<img src="http://placehold.it/750x450/e67e22/ffffff" width="100%">
</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>
</div>
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
body {
background: #ecf0f1;
}
.wrap {
width: 800px;
margin: 30px auto;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment