Image carousel with jQuery 3.3.1

Question

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 <= 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%");
            }
        }
    });
});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

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

Answer 1

I like it.

There are only a few things I would reconsider:

1. detectedId is a clunky name, clickedId or selectedId seems better
2. You hardcode 4, at least use a constant, ideally detect how many buttons there dynamically
3. The treatment for the first button is different enough that it can be placed outside of the loop

4. 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