创建垂直图像轮播

Question

我正在尝试创建一个自定义垂直图像轮播,因为我不能使用任何插件,因为附加到我需要保留的图像的js事件,唯一可行的方法是创建自定义轮播.

功能

• 图像轮播在视口中具有3个相同的大小.
• 图像轮播确实有下一个/上一个按钮,允许您查看/选择更多图像.
• 下一个/上一个按钮一次只允许一个步骤,这意味着它不会选择下一组图像并在视口中显示它.

• Carousel允许您选择视口中的任何图像,这将在单击下一个/上一个按钮时同步

上面列出的所有功能都已实现.

问题

最后一个图像不会在下一个按钮之前捕捉/停止,因为它会在两个按钮之间创建空白区域.

JS代码

$(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);

        }

});

小提琴:https://jsfiddle.net/qrvrdjch/6/

任何帮助将不胜感激 :)

Answer 1

试试这个...你需要将点击次数初始化为-1,并将if(click_count <image_count)更改为此"if(click_count <image_count - 3)",因为在加载时默认选择的图像是第一个,所以这个将是满足您的需求我想NB:css和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);

    }

});