Question

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

为每个项目创建一个网址（我目前正在使用location.hash）
根据提供的网址更改当前项目（我目前正在使用location.hash并访问幻灯片编号）
确保缩略图/幻灯片相应地更改为网址

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

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上。

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

任何帮助/更好的想法，这将是非常有帮助的！

Answer 1

我认为此代码可以为您提供帮助（这不是您代码的完美答案）

$("#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/

Answer 2

我有同样的问题。如何解决：

1）打开owl.carousel.js

2）在jumpTo中显示：

base.currentItem = base.owl.currentItem = position;

将其设置为：

base.currentItem = parseInt（base.owl.currentItem = position，10）;

在goTo中，同样的事情：

更改base.currentItem = base.owl.currentItem = position;

到

base.currentItem = parseInt（base.owl.currentItem = position，10）;

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

猫头鹰轮播+ URL +幻灯片项目更改

2 个答案: