Build a Carousel in JS

📄 Table of Contents

<!DOCTYPE html><html><head><link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>#wrapper{position:relative;}#parent{position: absolute;width: 310px;height: 100px;border: 2px solid black;overflow:hidden;}.child{width: 100px;height: 100px;border: 1px solid red;float:left;}#leftarrow{position: absolute;height: 25px;width: 25px;position:absolute;}#rightarrow{position: absolute;height: 25px;width: 25px;position:absolute;}</style></head><body><script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script><div  id="wrapper"><div id="parent"><div class="child"> 1 </div><div class="child"> 2 </div><div class="child"> 3 </div><div class="child"> 4 </div><div class="child"> 5 </div></div></div><script>// $("#leftarrow").click(function(){//   $( "#parent" ).animate({ "marginLeft": "-=100px" }, "slow" );// });// $( "#rightarrow" ).click(function() {//   $( "#parent" ).animate({ "marginLeft": "+=100px" }, "slow" );// });$('#parent').flickity({// optionscellAlign: 'left',contain: true});</script></body></html>

As a minimalist, here I share smallest Vanilla JS carousel coding technique.

I am going to show images with in list, <ul> and <li>. Then, I display these images horizontally with css. Next I add two buttons to navigate among images. Finally, I code 7 lines of Javascript to complete this carousel.

Sounds simple? Let’s go.

1. Show Images

<ul>
<li><img class="img1" src="//picsum.photos/300/200?1"></li>
<li><img class="img2" src="//picsum.photos/300/200?2"></li>
<li><img class="img3" src="//picsum.photos/300/200?3"></li>
<li><img class="img4" src="//picsum.photos/300/200?4"></li>
<li><img class="img5" src="//picsum.photos/300/200?5"></li>
<li><img class="img6" src="//picsum.photos/300/200?6"></li>
<li><img class="img7" src="//picsum.photos/300/200?7"></li>
<li><img class="img8" src="//picsum.photos/300/200?8"></li>
<li><img class="img9" src="//picsum.photos/300/200?9"></li>
</ul>

2. Style images

ul { display: flex; margin: 0; padding: 0; overflow: hidden; }
li { display: block; list-style: none; }

3. Add buttons to navigate

<button onclick="show(-1)">&lt;</button>
<button onclick="show(+1)">&gt;</button>
<style>
button.prev, button.next {
display: flex; font-size: 32px;
align-items: center; justify-content: center;
color: #FFF; background-color: #333;
border-radius: 50%;
width: 44px; height: 44px;
}
button.prev {
position: absolute; left: 0; top: 80px;
}
button.next {
position: absolute; right: 0; top: 80px;
}
</style>

4. Last, Code Javascript (7 lines)

let liEls = document.querySelectorAll('ul li');
let index = 0;
window.show = function(increase) {
index = index + increase;
index = Math.min(Math.max(index,0), liEls.length-1);
liEls[index].scrollIntoView({behavior: 'smooth'});
}

All done. Here we go. The good thing about this is that this technique is not limited to images, but you can use it for all types of list with different width and heights.

Feel free to fork stackblitz code (@https://stackblitz.com/edit/medium-carousel?file=index.html) and change contents of <li> contents.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>ul { display: flex; margin: 0; padding: 0; overflow: hidden; width: 40%; }li { display: block; list-style: none; }button.prev, button.next {display: flex; font-size: 32px;align-items: center; justify-content: center;color: #FFF; background-color: #333;border-radius: 50%;width: 44px; height: 44px;}button.prev {position: absolute; left: 0; top: 80px;}button.next {position: absolute; right: 0; top: 80px;}.img{height: 100px;width: 100px;border: 1px solid red;}</style></head><body><ul><li><div class="img" >1</div><li><div class="img" >2</div><li><div class="img" >3</div><li><div class="img" >4</div><li><div class="img" >5</div><li><div class="img" >6</div><li><div class="img">7</div><li><div class="img">8</div><li><div class="img">9</div></ul><button onclick="show(-1)">&lt;</button><button onclick="show(+1)">&gt;</button><script>let liEls = document.querySelectorAll('ul li');let index = 0;function show(increase) {index = index + increase;index = Math.min(Math.max(index,0), liEls.length-1);liEls[index].scrollIntoView({behavior: 'smooth'});}</script></body></html>

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store