Image carousel with jQuery 3.3.1 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:



$(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 &lt;= 4; i++) {
            if (detectId === ("btn" + i) &amp;&amp; i === 1) {
                $(".cont-img div").css("left", "0%");
            } else if (detectId === ("btn" + i)) {
                $(".cont-img div").css("left", "-" + (i - 1) + "00%");
            }
        }
    });
});
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

.carousel {
    width: 100%;
    height: 150px;
    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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="carousel"&gt;
    &lt;div class="cont-img"&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cont-btn"&gt;
        &lt;button type="button" id="btn1" class="active"&gt;&lt;/button&gt;
        &lt;button type="button" id="btn2"&gt;&lt;/button&gt;
        &lt;button type="button" id="btn3"&gt;&lt;/button&gt;
        &lt;button type="button" id="btn4"&gt;&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;




Thank you very much in advance to anyone who can help me.
I like it.

There are only a few things I would reconsider:


detectedId is a clunky name, clickedId or selectedId seems better
You hardcode 4, at least use a constant, ideally detect how many buttons there dynamically
The treatment for the first button is different enough that it can be placed outside of the loop
It seems you only need to know which button was clicked, which can be found by analyzing the selected id

if(selectedId === "btn1"){
  $(".cont-img div").css("left", "0%");
}else{
  let id = selectedId.split('btn')[1]*1;
  $(".cont-img div").css("left", "-" + (id - 1) + "00%");
}



This way you dont even need to hardcode 4