2
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ Wow I'm surprised, I'd no idea about that possible solution. Pd. You're right about the name of the variable \$\endgroup\$ – Lolete Sape Nov 16 '18 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.