1

I create the slider using jquery animation and css function, but it doesn't maintain there sliding feature.

<div id="slider">
  <ul>
    <li><img  src="img1.png" style="width: 1366px;display: inline-block;height: 400px;" ></li>
    <li><img style="height:200px;width: 1366px;display: inline-block;height: 400px;" src="img2.png" ></li>
    <li><img  src="img1.png" style="width: 1366px;display: inline-block;height: 400px;" ></li>
  </ul>
</div>

Here is my jQuery in which I use CSS function inside the if statement, but it doesn't work. And animation function create reverse flow of images after sliding of all images. I am using jQuery version 3.3.1

$(document).ready(function() {

  var total_count=$("#slider img").length;

  console.log(total_count);

  var count = 0;
  var zero =- 1500;

  setInterval(function () {
    $("#slider").animate({'marginLeft':zero},2000);           
    zero -= 1500;
    ++count;
    if (count == total_count) {
      zero=0;
      count=0; 
      $("#slider").css("margin-left","0px");
    }
  }, 4000);
});
Azametzin
  • 5,223
  • 12
  • 28
  • 46
Mayur
  • 71
  • 5
  • you could use a jquery slider script pre-made? https://owlcarousel2.github.io/OwlCarousel2/ is very compact for instance. Is also responsive already and stuff! – UnpassableWizard Aug 17 '18 at 17:52
  • This seems to be a duplicate. https://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect – Incisor Aug 17 '18 at 18:30
  • Possible duplicate of [How to build simple jQuery image slider with sliding or opacity effect?](https://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect) – Incisor Aug 17 '18 at 18:30

0 Answers0