Simple jQuery Carousel (slider) made by Sofiia Teplova
You can use it in your personal projects!
- Set up your HTML markup:
<div class="carousel">
<div class="carousel-arrow carousel-arrow-prev"><i class="fas fa-chevron-left"></i></div>
<div class="carousel-hider">
<ul class="carousel-ul">
<li class="carousel-li">
<img src="path/to/your/img">
<p class="carousel-description">Your description</p>
</li>
<li class="carousel-li">
<img src="path/to/your/img">
<p class="carousel-description">Your description</p>
</li>
<li class="carousel-li">
<img src="path/to/your/img">
<p class="carousel-description">Your description</p>
</li>
</ul>
</div>
<div class="carousel-arrow carousel-arrow-next"><i class="fas fa-chevron-right"></i></div>
</div>
- Move the jquery.carousel files into your project (jquery.carousel.js and jquery.carousel.css).
- Install FontAwesome.
- Add jquery.carousel.css in your <head>.
<link rel="stylesheet" type="text/css" href="path/to/jquery.carousel.css"/>
- Add jquery.carousel.js before your closing </body> tag, after jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.carousel.js"></script>
- Initialize your carousel in your script file or as an inline script tag
$('.carousel').carousel();
- You are all set up!