Jamie Jamie - 6 months ago 257
Javascript Question

Owl Carousel + URL + Slide Item Change

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!

Answer

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.net/webstyle/7EQR2/

Comments