Jquery custom images slider only works once or the third time

I'm trying to create a simple images slider. The problem I'm facing is that the next and prev buttons only work the first time. Then when you hover an item again it doesn't work. When you hover an item the third time it works, and so on.

I just can't find what's causing this behaviour.

    $('.item.with-sec-image').on('mouseenter', function(){          
      var $this = $(this);

     /* load data only once */ 
     if(!$this.hasClass('images-initialized')){
        var url = $this.data('handle').replace('.html', '.ajax');
        var purl = $this.data('handle');
        $.getJSON(url, function(data) {
          if (data.images.length > 1) {
            var slider = $this.find('.slider');
                if (data.images.length >= 2 && data.images.length != slider.find('li.selected').length ){
              $.each(data.images, function(index, image){
                var img_url = image.replace('50x50x2', '400x400x2')
                if(slider.find('li.selected').data('index') != index){
                  var $newImage = $('<li><a href="'+purl+'"><img src="'+img_url+'" /></a></li>')
                  slider.append($newImage);
                }                   
              });
            }
          }
        }).done(function(){
          $this.addClass('images-initialized');
        });
      } 
      $this.on('click', '.slider-btn', function(){        
        updateSlider($this)
      });
    });

The function to update the slider

function updateSlider(navigation) {
   var $this = navigation
   var sliderContainer = $this.find('.images .slider'),
   activeSlider = sliderContainer.children('.selected').removeClass('selected');

   if($this.hasClass('next')){
      ( !activeSlider.is(':last-child')) ? activeSlider.next().addClass('selected') : sliderContainer.children('li').eq(0).addClass('selected'); 
    } else {
      (!activeSlider.is(':first-child')) ? activeSlider.prev().addClass('selected') : sliderContainer.children('li').last().addClass('selected');
    } 
}

And a snippet of my html

 <div class="item with-sec-image" data-handle="some-url">

         <div class="images">
            <ul class="slider">
              <li data-index="0" class="selected"><img src="link-to-image"/></li>
            </ul>

            <ul class="slider-navigation">
              <li class="prev btn-round slider-btn small"><i class="icon-left"></i></li>
              <li class="next btn-round slider-btn small"><i class="icon-right"></i></li>
            </ul>

from Jquery custom images slider only works once or the third time