CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jemuel Elimanco
Jemuel Elimanco

Reputation: 556

Carousel animation for left button works incorrectly

I am currently working on my own carousel script, but the transition animation for the left button is not working correctly.

I think the problem is in the test function under if($move=="left"), but I am unable to figure out what is causing this.

$(document).ready(function() {


  /*********** CAROUSEL **********/
  var carouselInterval = setInterval(function() {
    moveCarousel();
  }, 3000);

  var carouselImageCount = $("#carousel li").length; // count the number of images
  var transitionCount = 0;

  function moveCarousel() {
    transitionCount++;
    if (transitionCount == carouselImageCount) {
      transitionCount = 0;
      $(this).css({
        marginLeft: 0
      });
    }
    $("#carousel ul").animate({
      marginLeft: "-100%"
    }, 1000, function() {
      $(this).find("li:last").after($(this).find("li:first"));
      $(this).css({
        marginLeft: 0
      });
    });
  }

  // when the cursur hovers on the image

  $("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
    clearInterval(carouselInterval);
  }, function() {
    carouselInterval = setInterval(function() {
      moveCarousel();
    }, 3000);
  });

  /*********** CAROUSEL **********/

  /*********** CAROUSEL ARROWS ************/
  $(".carouselArrowRight").click(function() {
    //moveCarousel();
    test("right");
  });
  $(".carouselArrowLeft").click(function() {
    test("left");
    //moveCarousel();
  });

  function test($move) {
      if ($move == "left") {
        transitionCount--;
        $(this).css({
          "margin-left": "100%"
        });
        $("#carousel ul").animate({
          marginLeft: "100%"
        }, 1000, function() {
          $(this).find("li:first").before($(this).find("li:last"));
          $(this).css({
            marginLeft: 0
          });
        });
      } else {
        transitionCount++;
        if (transitionCount == carouselImageCount) {
          transitionCount = 0;
          $(this).css({
            marginLeft: 0
          });
        }
        $("#carousel ul").animate({
          marginLeft: "-100%"
        }, 1000, function() {
          $(this).find("li:last").after($(this).find("li:first"));
          $(this).css({
            marginLeft: 0
          });
        });
      }
    }
    /*********** CAROUSEL ARROWS ************/
});
#carousel {
  width: 100%;
  overflow: hidden;
}
#carousel ul {
  padding: 0px;
  margin: 0px;
  width: 1920px;
  height: 330px;
  display: flex;
}
#carousel ul li {
  width: 100%;
  text-align: left;
  list-style: none;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
  <div class="wrapCarousel">
    <div class="carouselAlignment">
      <p class="carouselArrowLeft">
        <img src="http://placehold.it/30x30" alt="">
      </p>

      <div class="wrapInner">
        <div id="carousel">
          <ul id="carouselImages">
            <li>
              <img src="http://placehold.it/600x330" alt="">
            </li>
            <li>
              <img src="http://placehold.it/600x330" alt="">
            </li>
            <li>
              <img src="http://placehold.it/600x330" alt="">
            </li>
          </ul>
        </div>
      </div>

      <p class="carouselArrowRight">
        <img src="http://placehold.it/30x30" alt="">
      </p>
    </div>
  </div>
</section>
enter link description here

Upvotes: 0

Views: 101

Answers (1)

Artem
Artem

Reputation: 833

You should change items before animation. Also fixed margins in animations to absolute values.

$(document).ready(function() {


  /*********** CAROUSEL **********/
  var carouselInterval = setInterval(function() {
    moveCarousel();
  }, 3000);

  var carouselImageCount = $("#carousel li").length; // count the number of images
  var transitionCount = 0;

  function moveCarousel() {
    transitionCount++;
    if (transitionCount == carouselImageCount) {
      transitionCount = 0;
      $(this).css({
        marginLeft: 0
      });
    }
    $("#carousel ul").animate({
      marginLeft: "-600px"
    }, 2500, function() {
      $(this).find("li:last").after($(this).find("li:first"));
      $(this).css({
        marginLeft: 0
      });
    });
  }

  // when the cursur hovers on the image

  $("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
    clearInterval(carouselInterval);
  }, function() {
    carouselInterval = setInterval(function() {
      moveCarousel();
    }, 5000);
  });

  /*********** CAROUSEL **********/

  /*********** CAROUSEL ARROWS ************/
  $(".carouselArrowRight").click(function() {
    //moveCarousel();
    test("right");
  });
  $(".carouselArrowLeft").click(function() {
    test("left");
    //moveCarousel();
  });

  function test($move) {
      if ($move == "left") {
        transitionCount--;
        $("#carousel ul").find("li:first").before($("#carousel ul").find("li:last"));

        $("#carousel ul").css({marginLeft: "-600px"})
          .animate({marginLeft: "0"}, 2500);
      } else {
        transitionCount++;
        if (transitionCount == carouselImageCount) {
          transitionCount = 0;
          $(this).css({
            marginLeft: 0
          });
        }
        $("#carousel ul").animate({
          marginLeft: "-600px"
        }, 2500, function() {
          $(this).find("li:last").after($(this).find("li:first"));
          $(this).css({
            marginLeft: 0
          });
        });
      }
    }
    /*********** CAROUSEL ARROWS ************/
});
#carousel {
  width: 100%;
  overflow: hidden;
}
#carousel ul {
  padding: 0px;
  margin: 0px;
  width: 1920px;
  height: 330px;
  display: flex;
}
#carousel ul li {
  width: 100%;
  text-align: left;
  list-style: none;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
  <div class="wrapCarousel">
    <div class="carouselAlignment">
      <p class="carouselArrowLeft">
        <img src="http://placehold.it/30x30" alt="">
      </p>

      <div class="wrapInner">
        <div id="carousel">
          <ul id="carouselImages">
            <li id="black">
              <img src="http://placehold.it/600x330/000000/eeeeee" alt="">
            </li>
            <li id="red">
              <img src="http://placehold.it/600x330/ff0000/eeeeee" alt="">
            </li>
            <li id="green">
              <img src="http://placehold.it/600x330/00ff00/dddddd" alt="">
            </li>
            <li id="blue">
              <img src="http://placehold.it/600x330/0000ff/aaaaaa" alt="">
            </li>
          </ul>
        </div>
      </div>

      <p class="carouselArrowRight">
        <img src="http://placehold.it/30x30" alt="">
      </p>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions