Basic Continuous Image Carousel With jQuery
File Size: | 3.21 KB |
---|---|
Views Total: | 2739 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A continuous image carousel (aka slider) is a great way to showcase multiple images, content, and more on your website.
Creating a slider is a fairly simple task. We're going to use jQuery to create one today that can handle any amount of images you throw at it.
How to use it:
1. Insert a list of images to the slider.
<div id="slider"> <ul> <li><img src="1.jpg" alt="Image Alt" /></li> <li><img src="2.jpg" alt="Image Alt" /></li> <li><img src="3.jpg" alt="Image Alt" /></li> <li><img src="4.jpg" alt="Image Alt" /></li> <li><img src="5.jpg" alt="Image Alt" /></li> </ul> </div>
2. Add next/prev control buttons to the slider.
<p id="links"> <a href="#" id="previous">Prev</a> <a href="#" id="next">Next</a> </p>
3. Load the needed jQuery library and jQuery easing plugin (for easing functions) in the document.
<script src="/path/to/cdn/jquery.min.js" defer></script> <script src="/path/to/jquery.easing.min.js" defer></script>
4. Main CSS styles for the slider & controls.
/* Core Styles */ #slider { width:400px; overflow:hidden; border: 10px solid #4C4C4C; height:266px; position:relative; margin:auto; } #slider ul { list-style-type: none; margin: 0; padding: 0; position: absolute; top: 0; left: 0; display: flex; } #slider ul li img { display: block; } /* Control Styles */ #links { width:420px; display: flex; margin: 0 auto; } #links a { display:block; width:210px; background:#6C0204; height:50px; line-height:50px; color:#D5D5D5; text-decoration:none; text-align:center; } #links a:hover { background:#A51D1F; color:#fff; }
5. The core JavaScript (jQuery script) to activate the slider.
$(window).on('load', function() { "use strict"; const imageCount = $('#slider ul li').length; const imageWidth = $('#slider ul li img').first().width(); const totalWidth = (imageWidth * imageCount) + 'px'; let leftPosition = 0; let counter = 0; $('#slider ul').css('width', totalWidth); // next button $('#next').click(function() { counter++; if (counter === imageCount) { $('#slider ul').clone().appendTo('#slider'); $('#slider ul').last().css('left', imageWidth + 'px'); leftPosition = `-${totalWidth}`; $('#slider ul').last().animate({ left: 0 }, 700, 'easeInQuad'); $('#slider ul').first().animate({ left: leftPosition }, 700, 'easeInQuad', function() { $('#slider ul').first().remove(); }); counter = 0; } else { leftPosition = `-${counter * imageWidth}px`; $('#slider ul').animate({ left: leftPosition }, 700, 'easeInQuad'); } }); // previous button $('#previous').click(function() { counter--; if (counter < 0) { counter = imageCount - 1; $('#slider ul').clone().appendTo('#slider'); $('#slider ul').last().css('left', `-${totalWidth}`); leftPosition = `-${counter * imageWidth}px`; $('#slider ul').last().animate({ left: leftPosition }, 700, 'easeInQuad'); $('#slider ul').first().animate({ left: imageWidth + 'px' }, 700, 'easeInQuad', function() { $('#slider ul').first().remove(); }); } else { leftPosition = `-${counter * imageWidth}px`; $('#slider ul').animate({ left: leftPosition }, 700, 'easeInQuad'); } }); });
This awesome jQuery plugin is developed by zeed3v. For more Advanced Usages, please check the demo page or visit the official website.