fullpage.js独立的部分
问题描述:
我使用fullpage.jsfullpage.js独立的部分
我创建了一个结构,像这样
<section id="portfolio">
<div class="col-lg-5 col-sm-5" id="portfolio-left">
</div>
<div class="col-lg-7 col-sm-7" id="portfolio-right">
<div id="fullpage">
<section class="vertical-scrolling">
<div class="horizontal-scrolling">
<img src="https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg">
</div>
<div class="horizontal-scrolling">
<img src="https://i.ytimg.com/vi/a6gHj0bHmg8/maxresdefault.jpg">
</div>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the second section</h3>
</section>
</div>
</div>
</section>
,然后添加下面的JavaScript按
$('#fullpage').fullpage({
sectionSelector: '.vertical-scrolling',
slideSelector: '.horizontal-scrolling',
navigation: true,
slidesNavigation: true,
css3: true,
controlArrows: false,
});
我已经设置了文档打个JSFiddle来证明我在哪里与事物。所以目前,您可以水平和垂直滚动。所以我的第一张图片是一匹马,我想要做的是当你在这个部分,如果你垂直滚动显示马的信息。所以基本上,我正在尝试使垂直滚动与节的父节点相关。如果您处于熊形象并垂直滚动,它应显示关于熊的信息。
会是这样的事情吗?
谢谢