Question

我正在搜索一个滑块，它应该在滚动时垂直更改幻灯片。

这是参考网址：https://www.uber.com/移动滑块

请帮助我，我试图在7,8个小时后这样做。这是我想要使用的代码。

$(document).ready(function() {

// var totalheight=$(window).height();
// $('.carosel-section').css('height',totalheight);

//Set each section's height equals to the window height
//$('.moveable').height($(window).height());

$('.moveable').first().addClass('active');

$('.carousel-wrap').on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();//prevent the default mousewheel scrolling
    var active = $('.moveable.active');
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    if (delta < 0) {
        //mousewheel down handler
        next = active.next();
        if (next.length) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: next.offset().top
                }, 'fast');

                // move the indicator 'active' class
                next.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 100);
        }

    } else {
        prev = active.prev();

        if (prev.length) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: prev.offset().top
                }, 'slow');

                prev.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 800);
        }

    }
});

});

Answer 1

您是否尝试过查看Parallax.js？我认为这就是你要找的东西。主页上的示例应该可以让您快速入门！

滚动上的垂直滑块

1 个答案: