Jquery slider with angular js not working properly

Question

I am in a process to add a division slider to my website. I have made the division slider with the help of css and jquery. Here Goes the html code which has angular js directives in it. Number of divisions would be sent from the backend.

<div id="my-slick-holder">   
         <div class="thumbnailArrows"><img src="http://kimjoyfox.com/blog/wp-content/uploads/leftA.jpg" id="Tleft"/></div>
       <div id="myslick">

         <div id="divHolder" >
              <div class="block1" data-ng-repeat="a in test " ng-click="myData.doClick(a, $event)">
            <div class="img-holder" style=" background-image:url('img/battery.png') ;background-repeat:no-repeat; background-size:contain;background-position:center; height:70px;margin-top: 20px;"></div> 
            <div class="feature-name" ng-model="selectedItem">{{a.Feature}}</div>
          </div>
        </div>

        </div>
        <div class="thumbnailArrows"><img src="http://kimjoyfox.com/blog/wp-content/uploads/rightA.jpg" id="Tright" /></div>
</div>

Here goes the jquery code which makes this division slider slide.

<script type="text/javascript-lazy">
$(document).ready(function() {
//Hovering Over Thumbnail Navigation
$('.thumbnailArrows').hover(function() {
    var whiches = $(this).children('img').attr('id');
    if (whiches == 'Tleft') {
        movingThumbs1(3000, '+');
    }
    else {
        movingThumbs1(3000, '-');
    }
}, function() {
    $('#divHolder').stop();
});


//Function for Thumbnails Moving
function movingThumbs1(speed, direction) {
    var currentLeft = $('#divHolder').position().left;
    //figure out how far to go left - only for right arrow
    var moving = $('#divHolder').width() - (Math.abs($('#divHolder').position().left) + $('#myslick').width());
    if (currentLeft == 0 && direction == '+') {
        //do nothing
    } else if (Math.abs($('#divHolder').position().left) + $('#myslick').width() >= $('#divHolder').width() && direction == '-') {
        //do nothing
    } else if (direction == '+' && currentLeft != 0) {
        $('#divHolder').animate({
            left: 0,
        }, speed);
    } else {

        $('#divHolder').animate({
            left: '+='+direction + moving,
        }, speed);
    }
}
});

When the right arrow is hovered over the division slider moves to right . But after reaching the end it once again slide away bringing the empty area in picture. But after reaching the end function to move towards right shouldn't be called once again. But that happens. All the code works fine if I don't use angular js directives.

Answer 1

I recommend using jQuery UI to create sliders instead, it would make it much easier for you

here's what the code looks like for a slider:

$(<NAME>).slider({
    orientation: <"horizontal" or "vertical",
    range: <"min" or "max">,
    min: <min value>,
    max: <max value>,
    value: <default value>,
    step: <step value>,
    animate: <true or false>,
    slide: function (event, ui) {
        //what to do when sliding
    }
});

Answer 2

may be this could be issue:

<script type="text/javascript-lazy">

should be:

<script type="text/javascript">

because jQuery is type="text/javascript" .