There are 3 things I would like to do in javascript/jQuery.

1. Create a URL for each item (I am currently using location.hash)

2. Change the current item based off the URL provided (I am currently taking the location.hash and accessing the slide number)

3. Ensure both thumbnail/slide change accordingly to the 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.

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.

Any assistance/better idea to go about this, would be really helpful!

There are 3 things I would like to do in javascript/jQuery.

1. Create a URL for each item (I am currently using location.hash)

2. Change the current item based off the URL provided (I am currently taking the location.hash and accessing the slide number)

3. Ensure both thumbnail/slide change accordingly to the 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.

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.

Any assistance/better idea to go about this, would be really helpful!

• javascript
• jquery
• carousel
• owl-carousel

2 Answers 2

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);
});

http://jsfiddle/webstyle/7EQR2/

I had the same issue. How to resolve:

1) open owl.carousel.js

2) in jumpTo where it reads:

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

set it to:

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

3) in goTo, same thing:

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

into

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.