javascript Owl Carousel + URL + Slide Item Change
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21392086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl Carousel + URL + Slide Item Change
提问by Jamie
There are 3 things I would like to do in javascript/jQuery.
我想在 javascript/jQuery 中做 3 件事。
Create a URL for each item (I am currently using location.hash)
Change the current item based off the URL provided (I am currently taking the location.hash and accessing the slide number)
Ensure both thumbnail/slide change accordingly to the URL
为每个项目创建一个 URL（我目前正在使用 location.hash）
根据提供的 URL 更改当前项目（我目前正在获取 location.hash 并访问幻灯片编号）
确保缩略图/幻灯片都根据 URL 更改
I am encountering a few issues, which I believe I can fix. However, I am not sure I am going about this in the most logical/efficient way. Here is my current function:
我遇到了一些问题，我相信我可以解决。但是，我不确定我是否以最合乎逻辑/最有效的方式来解决这个问题。这是我目前的功能：
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);
}
}
The issues I have run into include:
我遇到的问题包括：
The current item doesn't change so if I go to the provided URL(say slide 9) and click next, the slide goes to 1 vs. 10 - since it thinks its on slide 0.
当前项目不会改变，所以如果我转到提供的 URL（比如幻灯片 9）并单击下一步，幻灯片会转到 1 对 10 - 因为它认为它在幻灯片 0 上。
I'm not exactly sure if this is an issue, but I believe I have to refresh twice if I change the url - /demos/sync.html#slide2 to /demos/sync.html#slide3.
我不确定这是否是一个问题，但我相信如果我将 url - /demos/sync.html#slide2 更改为 /demos/sync.html#slide3，我必须刷新两次。
Any assistance/better idea to go about this, would be really helpful!
任何帮助/更好的想法来解决这个问题，都会非常有帮助！
采纳答案by ShibinRagh
I think this code will help you (this is not perfect answer for your code )
我认为这段代码会帮助你（这不是你的代码的完美答案）
$("#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);
});
回答by mario-mesiti
I had the same issue. How to resolve:
我遇到过同样的问题。如何解决：
1) open owl.carousel.js
1）打开owl.carousel.js
2) in jumpTo where it reads:
2）在 jumpTo 中，它显示：
base.currentItem = base.owl.currentItem = position;
base.currentItem = base.owl.currentItem = 位置；
set it to:
将其设置为：
base.currentItem = parseInt(base.owl.currentItem = position, 10);
base.currentItem = parseInt(base.owl.currentItem = position, 10);
3) in goTo, same thing:
3）在goTo中，同样的事情：
change base.currentItem = base.owl.currentItem = position;
更改 base.currentItem = base.owl.currentItem = 位置；
into
进入
base.currentItem = parseInt(base.owl.currentItem = position, 10);
base.currentItem = parseInt(base.owl.currentItem = position, 10);
and you're done. Looks like it was a type mismatch between string and integer, making the next slide have a nonexistent index, i.e scroll ONE slide after slide 3 made the desired index 31 instead of 4.
你就完成了。看起来这是字符串和整数之间的类型不匹配，使下一张幻灯片的索引不存在，即在幻灯片 3 之后滚动一张幻灯片使所需的索引为 31 而不是 4。
