2

我想在 javascript/jQuery 中做 3 件事。

  1. 为每个项目创建一个 URL（我目前使用 location.hash）

  2. 根据提供的 URL 更改当前项目（我目前正在使用 location.hash 并访问幻灯片编号）

  3. 确保缩略图/幻灯片都根据 URL 进行更改

我遇到了一些问题，我相信我可以解决。但是，我不确定我是否会以最合乎逻辑/最有效的方式来解决这个问题。这是我当前的功能：

function slideUrl(el) {
  var current = this.currentItem;
  var slide = location.hash;
  if(location.hash === '') {
    location.hash = 'slide' + current;
  } else {
    var goToSlide = slide.replace("#slide",""); 
    sync1.trigger("owl.jumpTo", goToSlide);

    el.find(".owl-item").eq(goToSlide).addClass("synced");
    sync2.trigger("owl.jumpTo", goToSlide);

    this.currentItem = goToSlide;
    console.log(this.currentItem);         
  }
}

我遇到的问题包括：

当前项目没有改变，所以如果我转到提供的 URL（比如幻灯片 9）并单击下一步，幻灯片将转到 1 与 10 - 因为它认为它在幻灯片 0 上。

我不确定这是否是一个问题，但我相信如果我将 url - /demos/sync.html#slide2 更改为 /demos/sync.html#slide3，我必须刷新两次。

任何帮助/更好的想法都会非常有帮助！

4

2 回答 2

2

我认为这段代码会帮助你（这不是你的代码的完美答案）

$("#owl-demo").owlCarousel({
    items: 6,
    scrollPerPage: true,
    itemsDesktop: [1199,5],
    itemsDesktopSmall: [979,4],
    itemsTablet: [768,4],
    itemsTabletSmall: [479,3],
    itemsMobile: [360,2]
});
owl = $("#owl-demo").data('owlCarousel');

$('.go').on('click', function(){
    var inputVal = parseInt($('input').val()) - 1;
    owl.jumpTo(inputVal);
});

http://jsfiddle.net/webstyle/7EQR2/

于 2014-02-27T06:56:02.280 回答
0

我遇到过同样的问题。如何解决：

1）打开owl.carousel.js

2）在 jumpTo 中它读取：

base.currentItem = base.owl.currentItem = 位置；

将其设置为：

base.currentItem = parseInt(base.owl.currentItem = position, 10);

3）在goTo中，同样的事情：

更改 base.currentItem = base.owl.currentItem = 位置；

进入

base.currentItem = parseInt(base.owl.currentItem = position, 10);

你就完成了。看起来这是字符串和整数之间的类型不匹配，使得下一张幻灯片的索引不存在，即在幻灯片 3 使所需的索引为 31 而不是 4 之后滚动一张幻灯片。

于 2016-05-27T08:50:34.487 回答