Все изображения товара не отображаются при их отображении в пользовательском слайдере.

Question

Я хочу показать изображения товара в виде слайдера. Мой слайдер работает нормально, когда у меня есть три изображения для продукта, но когда у меня меньше трех изображений, кажется, что слайдер работает неправильно.

Я хочу отобразить следующие изображения, когда нажата стрелка вправо но когда у меня меньше трех изображений и я нажимаю на стрелку вправо, все мои изображения становятся пустыми. Это страница, где вы можете проверить поведение: PageLink

Как я могу это исправить?

Это мой код:

$(".is--left").unbind().click(function() {
   var img = $(this).siblings(".image-slider--slide").find(".mySlides");
   $(img).children().css("display", "none");
   if($(img).children().hasClass("active")) {
       var index = $(img).children(".active").index();
       $(img).children().removeClass("active");
       $(img).children()[index-1].classList.add("active");
       $($(img).children()[index-1]).css("display", "block");
       if(index-1==0) {
           $(this).css("display","none");
       }
       if(index+1 == $(img).children().length) {
           $(this).siblings(".is--right").css("display","block");
       }
   }
   else {
       $(img).children()[0].classList.add("active");
       $($(img).children()[0]).css("display", "block");

   }
});

$(".is--right").unbind().click(function() {
   var img = $(this).siblings(".image-slider--slide").find(".mySlides");
   $(img).children().css("display", "none");
   /*if(==1){
        $(this).siblings(".is--right").css("display","none");
                   $(this).siblings(".is--left").css("display","none");

   }*/
   if($(img).children().hasClass("active")) {
       var index = $(img).children(".active").index();
       $(img).children().removeClass("active");
       $(img).children()[index+1].classList.add("active");
       $($(img).children()[index+1]).css("display", "block");
      // if(index+2==$(img).children().length) {
        //   $(this).css("display","none");
       //}
       if(index == 0) {
           $(this).siblings(".is--left").css("display","block");
       }
   }
   else {
       $(img).children()[1].classList.add("active");
       $($(img).children()[1]).css("display","block");
       $(this).siblings(".is--left").css("display","block");
   }
});