Create vertical image carousel
<p>I'm trying to create a <em>custom vertical image carousel</em> because I can't use any plugins out there due to the js events attached to the images which I need to retain and the only way that would work for me is to create custom carousel.</p>

<p><strong>Functionalities</strong></p>

<ul>
<li>Image carousel does have 3 equal sizes in the viewport.</li>
<li>Image carousel does have next/previous button which allow you to view/select more images.</li>
<li>The next/previous button allows only one step at a time, meaning it will not select the next set of images and display it in the viewport. </li>
</ul>

<p><a href="https://i.stack.imgur.com/Dkvs2.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dkvs2.gif" alt="enter image description here"></a></p>

<ul>
<li>Carousel offers you to select any images in the viewport and this will sync when the next/prev button is clicked</li>
</ul>

<p><a href="https://i.stack.imgur.com/Ua3HK.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ua3HK.gif" alt="enter image description here"></a></p>

<p>All functionalities listed above is implemented already.</p>

<p><strong>PROBLEM</strong></p>

<p>The last image will not snap/stop before the next button, as it will create blank space in between.</p>

<p><a href="https://i.stack.imgur.com/1sv4n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1sv4n.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/q1pfk.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q1pfk.gif" alt="enter image description here"></a></p>

<p><strong>JS Code</strong></p>

<pre><code>$(function(){
        var image_height = 0;
        var gallery_offset = 0;
        var image_count = $('img.thumbnail').length;
        var click_count = 0;
        var image_height = 0;
        var last_images_count = 0;

        $('.gallery-container a').click(function(){
          $('.gallery-container a').removeClass('active')
            $(this).addClass('active');

        });

        jQuery('.thumbnail').each(function(){
          $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
          image_height = $(this).parent().outerHeight();
        })

        // Disable arrows if the images count is 3 below
        if(image_count &lt;= 3) {
            $('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
            click_count = 0;
        }

        // Set the first image as active
        jQuery('.gallery-container img.thumbnail').first().click();
        var thumb_active = jQuery('.gallery-container .active');

        $('.gallery-container a').on('click', function() {
            thumb_active = jQuery('.gallery-container .active');
        });

        $('.product-more-pictures .down').on('click', function (e) {
            $('.product-more-pictures .up').removeClass('disabled')
            if(thumb_active.nextAll(':lt(1)').length) {
              thumb_active.nextAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');

            } 

            if( ! thumb_active.next().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }

            if (click_count &lt; image_count) {
                click_count = click_count + 1;

                update_gallery('down');
            }



        });

        $('.product-more-pictures .up').on('click', function () {
            $('.product-more-pictures .down').removeClass('disabled')
            if(thumb_active.prevAll(':lt(1)').length) {
              thumb_active.prevAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');
            }

            if( ! thumb_active.prev().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }

            if (click_count &gt; 0) {
                click_count = click_count - 1;

                update_gallery('up');

            }
        });

        function update_gallery(direction) {         
            gallery_offset = click_count * image_height;
            last_images_count = thumb_active.nextAll().length;

            $(".gallery-container").animate({
              'top': '-' + gallery_offset + 'px'
            }, 800);

        }

});
</code></pre>

<p>Fiddle : <a href="https://jsfiddle.net/qrvrdjch/6/" rel="nofollow noreferrer">https://jsfiddle.net/qrvrdjch/6/</a></p>

<p>Any help would be greatly appreciated :)</p>