Need help with this Jquery

[Sora_Keyheart]

OK, I got it working!!!
I created a scroll left/right code with javascript and its working great.
This is the code:

$(document).ready(function () {
    $("#next").click(function () {
        $(".slide").animate({
            left: '-=500'
        }, 'slow');
    });
    $("#prev").click(function () {
        $('.slide').animate({
            left: '+=500'
        }, 'slow');
    });
});

Its animating to right and to left on what button I click, but there is a problem, no matter how much I click, the animation will still keep going right or left infinitely after every click.
So how to set the code to make the click not work after it reaches the end of the div??

HTML:

<div class="row">
       <!-------- SlideShow -------->
       <div class="col-lg-11
                   col-md-11
                   col-sm-11
                   col-xs-11">
                   <table class="img-slide">
       <!-------- Interior -------->
                   <div class="slide col-lg-12 col-md-12 col-sm-12 col-xs-12">
                   <h2 class="architecture"><b>Architecture</b></h2>
                <img height="520" src="imgs/cover/wakame.png"/>
                <img height="520" src="imgs/cover/tarhati.png"/>
                <img height="520" src="imgs/cover/baytoti.png"/>
                <img height="520" src="imgs/cover/lomar.png"/>
                <img height="520" src="imgs/cover/meraki.png"/>   
      <!-------- Architecture -------->
                  <h2 class="interior"><b>Interior</b></h2>
               <img height="520" src="imgs/cover/inameiya.png"/>
                  </div>
                   </table>
                   
                   <button id="prev">
                       <span class="glyphicon glyphicon-chevron-left"></span>
                   </button> 
                   
                   <button id="next">
                       <span class="glyphicon glyphicon-chevron-right"></span>
                   </button> 
                   
       </div>
   </div>

CSS:

.img-slide, .slide {
    display:inline-flex !important;
}

.architecture {
    transform: rotate(-90deg);
    transform-origin: 45% 17%;
    margin-right: -150px;
}

.interior {
    transform: rotate(-90deg);
    transform-origin: 46% 8%;
    margin-right: -65px;
}

img {
    position: relative;
}

[littlebirdy]

any live demo of what you have achieved?

do you mean that after the last image is reached the first image is coming in? If yes then that’s the way carousels work.

[Sora_Keyheart]

I tried JSfiddle for live demo but it’s not working the way i want it to, but I will explain:

when I load the website, this is the slide show:

When I click the left or right button it keeps functioning and goes infinitely to the direction even when there is no images, like this:

Clicked left ^

Note:
the button goes 500px to right(right buttom)
the button goes -500px to left(left button)

[littlebirdy]

OK I am also a newbie. So I won’t be able to help you much. Your animate function is moving the whole slider by 500 pixels to the left/right. And as a result that gap is formed.

The cycling of the slider images is not happening here. You need to make the code like that so that after the last image the slider again reaches or fetches the first image.