我正在使用glide.js,我很欣赏一些能让它发挥作用的想法。
我需要连接(项目< slider 1<第1页)到(items< slider 2< page 2)。主题:(例如)如果我从第一页点击第二项,则显示第二页,并且还显示第二页的第二项。这是一些代码:
// Glide Page 1
var glide = $('.slider').glide().data('api_glide');
$(window).on('keyup', function(key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider__arrows-item').on('click', function() {
console.log(glide.current());
});
<!-- Page 1 -->
<link href="http://glide.jedrzejchalubek.com/css/glide.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://glide.jedrzejchalubek.com/js/jquery.glide.min.js"></script>
<body bgcolor="#999">
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item">
<a class="button" href="http://www.example.com/Page_2.php" id="#content_01">Access to Content 1 on Page 2</a>
</li>
<li class="slider__item ">
<a class="button " href="http://www.example.com/Page_2.php" id="#content_02">Access to Content 2 on Page 2</a>
</li>
<li class="slider__item ">
<a class="button" href="http://www.example.com/Page_2.php" id="#content_03">Access to Content 3 on Page 2</a>
</li>
</ul>
</div>
// Glide Page 2
var glide = $('.slider').glide().data('api_glide');
$(window).on('keyup', function(key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider__arrows-item').on('click', function() {
console.log(glide.current());
});
<!-- Page 2 -->
<link href="http://glide.jedrzejchalubek.com/css/glide.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://glide.jedrzejchalubek.com/js/jquery.glide.min.js"></script>
<body bgcolor="#000">
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item" id=“#content_01”>
<div>Some Content</div>
</li>
<li class="slider__item" id=“#content_02”>
<div>Some Content</div>
</li>
<li class="slider__item" id=“#content_03”>
<div>Some Content</div>
</li>
</ul>
</div>
谢谢!