HTML code work properly but when ng-repeat use then all images show in page in angularjs. And when i click next button then all images work properly one by one

[Muhammad Fareed]

// HTML code when i am using ng-repeat
     <section class="">
            <div class="container sakhu" ng-init="image()">
                <div class="row">
                    <div class="col-md-12">                    
                        <div class="mySlides" ng-repeat="img in images"> 
                            <div class="numbertext">1 / 6</div>
                            <img class="size-i" ng-src="{{img.oe_images}}" style="width:100%;">
                        </div>
                    </div>
                </div>
            </div>
         </section>
         <section class="" >
             <div class="container sakhu" >
                <div class="row">
                   <div class="col-md-12">
                      <a class="prev" style="font-size:36px;" onclick="plusSlides(-1)">❮</a>
                      <a class="next" style="font-size:36px;" onclick="plusSlides(1)">❯</a> 
                     <div class="row paddi" ng-init="image()">
                       <div class="column" ng-repeat="img in images">
                           <img class="demo cursor border-demo" src="{{img.oe_images}}" style="width:100%;" onclick="currentSlide(1)"
                                    alt="The Woods">
                        </div>
                        </div>
                      </div>
                  </div>
                </div>
        </section>

 // js code. here showing one length of the slider
  <script>
     var slideIndex=1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }
       function showSlides(n) {
        console.log(n);
        var i;
       var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        console.log(slides.length);
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        // captionText.innerHTML = dots[slideIndex - 1].alt;
    }
    </script>

[jssor]

Not sure if your javascript code runs before new $JssorSlider$(...) or not.

If so, it should work. Please check ng-repeat rendered correctly.

If not, you'd know that, after jssor slider initialized, simply setting display:none doesn't affect number of slides for jssor slider to manage. You'd use $AppendSlides, $RemoveSlides and $ReloadSlides instead.