Skip to content

Instantly share code, notes, and snippets.

@0xMALVEE
Created September 24, 2018 14:25
Show Gist options
  • Save 0xMALVEE/405b315e579e5918275da1be143b7f28 to your computer and use it in GitHub Desktop.
Save 0xMALVEE/405b315e579e5918275da1be143b7f28 to your computer and use it in GitHub Desktop.
Carousel Slider
<div id="showcase">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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="carousel-item carousel-img-1 active">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">Heading one</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde commodi, non amet saepe,
ipsa nostrum soluta, labore minima deserunt incidunt eos laborum.</p>
<a href="#" class="btn btn-danger btn-lg">Signup Now</a>
</div>
</div>
</div>
<div class="carousel-item carousel-img-2">
<div class="container">
<div class="carousel-caption d-none d-sm-block mb-5">
<h1 class="display-3">Heading two</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde commodi, non amet saepe,
ipsa nostrum soluta, labore minima deserunt incidunt eos laborum.</p>
<a href="#" class="btn btn-primary btn-lg">Learn More</a>
</div>
</div>
</div>
<div class="carousel-item carousel-img-3">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">Heading three</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde commodi, non amet saepe,
ipsa nostrum soluta, labore minima deserunt incidunt eos laborum.</p>
<a href="#" class="btn btn-danger btn-lg">Signup Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment