HTML

<div class="carousel"> <div class="cont-img"> <div></div> <div></div> <div></div> <div></div> </div> <div class="cont-btn"> <button type="button" id="btn1" class="active"></button> <button type="button" id="btn2"></button> <button type="button" id="btn3"></button> <button type="button" id="btn4"></button> </div> </div> 

CSS

body { width: 100%; margin: 0; padding: 0; } .carousel { width: 100%; height: 500px; position: relative; overflow: hidden; } .carousel .cont-img { width: 100%; height: 100%; } .carousel .cont-img div { width: 100%; height: 100%; position: absolute; left: 0; background-color: aqua; transition: left .75s ease-in-out; } .carousel .cont-img div:nth-of-type(2) { background-color: aquamarine; margin-left: 100%; } .carousel .cont-img div:nth-of-type(3) { background-color: blueviolet; margin-left: 200%; } .carousel .cont-img div:nth-of-type(4) { background-color: cornflowerblue; margin-left: 300%; } .carousel .cont-btn { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); cursor: default; } .carousel .cont-btn button { width: 18px; height: 18px; background-color: transparent; border: 2px solid #000; border-radius: 100%; margin: 0 5px; padding: 0; outline: none; transition: background-color .25s ease-in-out; cursor: pointer; } .carousel .cont-btn .active { background-color: #000; } 

jQuery

$(document).ready(function () { $(".cont-btn button").click(function (event) { var detectId = event.target.id; $(".cont-btn button").removeClass("active"); $(this).addClass("active"); for (i = 1; i <= 4; i++) { if (detectId === ("btn" + i) && i === 1) { $(".cont-img div").css("left", "0%"); } else if (detectId === ("btn" + i)) { $(".cont-img div").css("left", "-" + (i - 1) + "00%"); } } }); }); 

everybody!

I'm trying to make a carousel with jQuery, so... this is my code:

I'm trying to make a carousel with jQuery and I want to know, how to simplify the code further? so... this is my code: