容器内的垂直可滚动滑块

Question

我正在寻找一个页面，在该页面中我可以进行垂直幻灯片放映（包含图像和文本），该幻灯片在向下滚动时会发生变化，一旦到达最后一张幻灯片，父页面就会开始滚动。您可以在下一页上看到示例 https://www.mi.com/in/redmi-note5/

我尝试了各种示例，但所有示例都是整页示例。所以在这里，我想将垂直幻灯片放在页面的某个部分中。

希望有人可以在这里帮助我。

我正在尝试使用FSVS代码。

您可以在此处检查尝试的代码

Trial page

Answer 1

您可以使用光滑的滑块。查看演示，您将获得答案。 http://kenwheeler.github.io/slick/ 您可以使用转轮事件，并确保在滑行选项中设置了infinite: false。

var $sliderElm = $('.slider');

$sliderElm.on('wheel', function(event) {
    event.preventDefault();
    if (event.originalEvent.deltaY < 0) {
        $(this).slick('slickPrev');
    } else {
        $(this).slick('slickNext');
    }
});