Skip to content

Instantly share code, notes, and snippets.

@trinhtanloc789

trinhtanloc789/bootstrap-4-carousel-slider-slideshow.markdown

Created December 24, 2019 06:03
Show Gist options
  • Save trinhtanloc789/e802c8217b792427dcb4544bff13a0fa to your computer and use it in GitHub Desktop.
Save trinhtanloc789/e802c8217b792427dcb4544bff13a0fa to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 4: Carousel / Slider / Slideshow
Raw
index.html
<main>
<div class="container">
<div class="carousel slide" id="main-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-carousel" data-slide-to="0" class="active"></li>
<li data-target="#main-carousel" data-slide-to="1"></li>
<li data-target="#main-carousel" data-slide-to="2"></li>
<li data-target="#main-carousel" data-slide-to="3"></li>
</ol><!-- /.carousel-indicators -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://s19.postimg.cc/qzj5uncgj/slide1.jpg" alt="">
<div class="carousel-caption d-none d-md-block">
<h1>Mountain</h1>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://s19.postimg.cc/lmubh3h0j/slide2.jpg" alt="">
<div class="carousel-caption d-none d-md-block">
<h3>Mountain</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci esse vitae exercitationem fugit, numquam minus!</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://s19.postimg.cc/99hh9lr5v/slide3.jpg" alt="">
<div class="carousel-caption d-none d-md-block">
<h3>Mountain</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci esse vitae exercitationem fugit, numquam minus!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s19.postimg.cc/nenabzsnn/slide4.jpg" alt="" class="d-block img-fluid">
<div class="carousel-caption d-none d-md-block">
<h3>Mountain</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci esse vitae exercitationem fugit, numquam minus!</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<a href="#main-carousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only" aria-hidden="true">Prev</span>
</a>
<a href="#main-carousel" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only" aria-hidden="true">Next</span>
</a>
</div><!-- /.carousel -->
</div><!-- /.container -->
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment