使用glide.js访问特定项目

时间:2015-03-06 11:39:08

标签: javascript jquery

我正在使用glide.js,我很欣赏一些能让它发挥作用的想法。

我需要连接(项目< slider 1<第1页)到(items< slider 2< page 2)。主题:(例如)如果我从第一页点击第二项,则显示第二页,并且还显示第二页的第二项。这是一些代码:

Page 1

// 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>

Page 2

// 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>

谢谢!

0 个答案:

没有答案