Create vertical image carousel

Question

I'm trying to create a custom vertical image carousel 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.

Functionalities

Image carousel does have 3 equal sizes in the viewport.
Image carousel does have next/previous button which allow you to view/select more images.
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.

enter image description here

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

enter image description here

All functionalities listed above is implemented already.

PROBLEM

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

enter image description here

JS 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 <= 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 < 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 > 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);

        }

});

Fiddle : https://jsfiddle.net/qrvrdjch/6/

Any help would be greatly appreciated :)

Manu S · Accepted Answer

Try this... you need to initialize the click count as -1, and change the if (click_count < image_count) to this "if (click_count < image_count - 3)" since on load default selected image is first, so this one will serve your need I guess NB: no change required in css and HTML

$(function(){
    var image_height = 0;
    var gallery_offset = 0;
    var image_count = $('img.thumbnail').length;
    var click_count = -1;
    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 <= 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 < image_count - 3) {
            console.log(image_count)
            console.log(click_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 > 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);

    }

});

hardcoder · Answer

You are almost there. You just need to edit one condition. Change "if (click_count < image_count)" under click event of down button(line 48 in JSFiddle) to "if (click_count < image_count-3)"

$(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 <= 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 < image_count-3) {
                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 > 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);
        
        }
        
});

.product-more-pictures a {
  display: block;
  text-align: center;
}

.product-more-pictures a.disabled {
  pointer-events: none !important;
  cursor: default;
  visibility: visible !important;
  background: #C3C3C3;
}

.product-more-pictures a.down.disabled:before,
.product-more-pictures a.up.disabled:before{
	content: ' ';
    background: rgba(255, 255, 255, 0.42);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    bottom: 0px;
}

.product-more-pictures {
  text-align: right;
  height: 549px;
  width: 111px;
  overflow: hidden;
  position: relative;

}

.gallery-container {
  position: relative;
  padding: 30px 0px;
}

.gallery-container img {
  margin-bottom: 0px;
}

#product-photos .product-more-pictures {
  width: 18.516667%;
}

.product-more-pictures .up,
.product-more-pictures .down {
  position: absolute;
  background: #999;
  padding: 0px;
  width: 100%;
  text-align: center;
  z-index: 80;
  color: #fff;
  padding: 5px 10px;
}

.product-more-pictures .up { top: 0px; }
.product-more-pictures .down {
  bottom: 0px; 
}

.product-more-pictures a.active img {
  border: solid 1px rgba(95, 95, 95,0.75) !important;
}

.product-more-pictures .icon-chevron-up,
.product-more-pictures .icon-chevron-down {
  color: #fff !important;
  font-size: 21px;
  position: relative;
}

.product-more-pictures .icon-chevron-up {
  top: 0px;
}

.zoomContainer { z-index: 999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-more-pictures desktop-3">
      <a href="#" class="up">up</a>
      <div class="gallery-container">
      
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_027_compact.jpg?v=1451925772" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_111_compact.jpg?v=1451925773"alt="Sheer Perfection Tunic">
          </a>
      
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_194_compact.jpg?v=1451925774" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#" >
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_029_compact.jpg?v=1451925774" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_095_compact.jpg?v=1451925775" data-image-id="8200864135" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_135_compact.jpg?v=1451925776" data-image-id="8200864327" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#" >
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_149_compact.jpg?v=1451925776" data-image-id="8200864775" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#" >
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_152_compact.jpg?v=1451925777" data-image-id="8200865671" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_159_compact.jpg?v=1451925778" data-image-id="8200866183" alt="Sheer Perfection Tunic">
          </a>
      
      </div>
      <a href="#" class="down">down</a>
    </div>

Create vertical image carousel

Tags:

javascript

jquery

carousel

Vincent Panugaling

2 Answers

Manu S

hardcoder

Recent Activity

Donate For Us

Create vertical image carousel

Tags:

javascript

jquery

carousel

Vincent Panugaling

2 Answers

Manu S

hardcoder

Related questions

Recent Activity

Donate For Us