带有固定侧边栏图像库的fullpage.js
我正在寻找一种方法来使用fullpage.js作为幻灯片，左侧有一个固定的侧边栏，其中包含一个“INFO”按钮，该按钮在div中单击幻灯片，其中的信息引用了Section / Image，在视口中可见。
我正在使用基本setUp for fullpage.js和div容器“fullpage”，包括“section”div。每个部分都有一个bg图像和一个div，可以捕获图像。
侧边栏固定在左侧和“fullpage”容器外面，并带有以下标记。
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<a href="" class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<a href="#" class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>
<!-- Gallery image count 4 -->
<span>1/15</span>
<a href="#" class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
有人可以用jquery代码帮我解决这个问题吗？
您可以在下面的图片中找到基本布局。
3 个答案:
答案 0 :(得分：0)
试试这个
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.site-nav{
height: 100vh;
width: 135px;
background-color: pink;
position: fixed;
}
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar{
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
}
.body{
background-color: white;
float:left;
width:90%;
height:100%;
}
#section-one {
height: 100vh;
width: 100%;
background-color: pink;
}
#section-two {
height: 100vh;
width: 100%;
background-color: red;
}
#section-three {
height: 100vh;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="sidebar">
</div>
<div id="section-one">
</div>
<div id="section-two">
</div>
<div id="section-three">
</div>
</body>
</html>
答案 1 :(得分：0)
以下是我网站的截图。我会尽快把它放在服务器上。并添加链接。
答案 2 :(得分：0)
以下是该网站的HTML代码。
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<a class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>
<!-- gallery image count 4 PHP Issue -->
<span>1/15</span>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
<div id="fullpage">
<!-- section 1 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>1955—60</h2>
<p class="lead">die erste liebe<br>und Schule aller Renner</p>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns" id="glsp-1">
</div>
</div>
</div>
<!-- section 2 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>Bruno Beuss</h2>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-2">
</div>
</div>
</div>
<!-- section 3 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<p class="lead">DIE ABSOLUTE BEHERRSCHUNG DER...</p>
<hr>
<a class="button scrollDown">GALERIE</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-3">
</div>
</div>
</div>
<!-- section 4 Gallery Start-->
<div class="section">
<div class="row gallery-content-box wow slideInLeft fadeIn">
<div class="wow fadeIn" id="glsp-4">
</div>
</div>
</div>
<!-- section 5 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s" id="glsp-5-1">
</div>
<div class="medium-6 columns wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s" id="glsp-5-2">
</div>
</div>
</div>
</div>
<!-- Gallerie Lightbox -->
<div class="medium-3 columns toggle-lighbox hide animated slideOutLeft" id="gallery-lightbox">
<div class="row gallery-lightbox-innerwrap">
<ul class="medium-11" id="gallery-lightbox-menu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/fullpage.js/vendors/jquery.slimscroll.min.js"></script>
<script src="bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/wow/dist/wow.js"></script>
<script src="js/app.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
menu: '#gallery-lightbox-menu',
resize: false,
animateAnchor:false,
scrollOverflow: true,
autoScrolling:true,
responsive: 900,
fitSection: false,
navigation:true,
navigationPosition: 'right',
navigationTooltips: ['firstSection', 'secondSection'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
continuousVertical:true,
scrollBar: true,
css3: true,
afterLoad: function (anchorLink, index) {
// #toggle-menu for section 4...
if (index == 4) {
$(".toggle-menu").css('visibility','visible')
}
},
onLeave: function (index, nextIndex, direction) {
//going from section 3 to 4
if (index == 3 && direction == 'down') {
//whatever
}
//going form section 4 to 3
else if (index == 4 && direction == 'up') {
$(".toggle-menu").css('visibility','hidden')
}
}
});
// toggle-lighbox-opener
$('.gallery-open').click(function() {
if($('.toggle-lighbox').hasClass('slideOutLeft'))
{
$('.toggle-lighbox').addClass('slideInLeft').removeClass('hide slideOutLeft');
}
else
{
$('.toggle-lighbox').addClass('slideOutLeft').removeClass('slideInLeft');
}
});
// slimscroll.js
$(function(){
$('.gallery-lightbox-innerwrap').slimScroll({
height: '100vh',
size: '7px',
position: 'right',
color: '#87704c',
alwaysVisible: true,
// distance: '-10px',
// start: $('#child_image_element'),
railVisible: true,
railColor: '#87704c',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: true,
disableFadeOut: true,
});
});
$(document).on('click', '.scrollDown', function(){
$.fn.fullpage.moveSectionDown();
});
$(document).on('click', '.scrollUp', function(){
$.fn.fullpage.moveSectionUp();
});
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 100, // default
mobile: true, // default
live: true // default
}
)
wow.init();
});
</script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？