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

时间:2014-01-27 21:30:06

标签: javascript jquery carousel owl-carousel

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

  1. 为每个项目创建一个网址(我目前正在使用location.hash)

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

  3. 确保缩略图/幻灯片相应地更改为网址

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

    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.

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

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

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

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之后滚动一张幻灯片。