Carousel
Carousel
How To Start :
This carousel is responsive by default and comes with all necessary component like indicators, caption, previous and next bottons also default fade in animation.
- To use this carousel follow the HTML stucture given below.
- You meed to use carpusel wrapping class .carousel then inside that to <ul> tag with class .carousel-body
- <img> tag is added inside <li> tag.
For Caption
- To use caption on your carousel you need to add <div> with a class slide-caption as mention below.
- You have to use <h1> for heading and <p> for description on caption as it comes with default styling.
- You can add caption on right ,center or left on your slide for that you have to use .caption-left or caption-center on slide-caption div.
HTML Structure
<div class="carousel">
<ul class="carousel-body">
<li>
<img src="../img/4.jpg" alt="">
<div class="slide-caption">
<h1>Caption -default</h1>
<p>Lorem ipsum dolor sit amet,rum reprehenderit culpa illo, fugit, totam.</p>
</div>
</li>
<li>
<img src="../img/4.jpg" alt="">
<div class="slide-caption">
<h1>Caption -default</h1>
<p>Lorem ipsum dolor sit amet,rum reprehenderit culpa illo, fugit, totam.</p>
</div>
</li>
<li>
<img src="../img/4.jpg" alt="">
<div class="slide-caption">
<h1>Caption -default</h1>
<p>Lorem ipsum dolor sit amet,rum reprehenderit culpa illo, fugit, totam.</p>
</div>
</li>
</ul>
<ol class="indicators"></ol>
<div class="left">
<span><i class="fas fa-chevron-circle-left"></i></span>
</div>
<div class="right">
<span><i class="fas fa-chevron-circle-right"></i></span>
</div>
</div>