javascript — OwlCarousel2 Обновление URL-адреса хэш-навигации при перетаскивании

В настоящее время я использую OwlCarousel2 для своих потребностей в карусели. Я выбрал OwlCarousel2 вместо OwlCarousel1, так как он имеет навигацию по хешу URL: http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html

<div id="contestant-carousel">
<div id="poll-images" class="owl-carousel">
<?php
for($counter = 1; $counter <= 14; $counter++) {
echo "<div class='item' data-hash='$counter'><a href='" . HTTP_SERVER . "vote.php?contestant_id=$counter'><img src='/images/contestants_mobile/$counter.png' alt='$counter'></a></div>";
}
?>
</div>
</div>

Выше приведен код PHP, который я использую для создания моей карусели. У меня четырнадцать изображений, поэтому мой код перебирает все четырнадцать изображений и добавляет data-hash Объект для каждого изображения (для навигации якоря необходимо).

Ниже приведен мой код Javascript:

$(document).ready(function() {
$("#poll-images").owlCarousel({
items: 1,
loop:false,
center:true,
margin:10,
lazyLoad:false,
URLhashListener:true,
onDragged:callback,
autoplayHoverPause:true,
startPosition: 'URLHash'
});

function callback(event) {
window.location.hash = event.item.index;
console.log(event.item.index);
}
});

Теперь вышеприведенная карусель работает отлично, если пользователь вручную добавляет хеш в свой URL, т.е. someurl.com/voting.php#4, это будет перейти к четвертому изображению.

Тем не менее, я хочу сделать это, если URL переходит к someurl.com/voting.php, поскольку они прокручивают каждое изображение, мой URL обновит свою привязку соответственно. Зачем? Так как, если мой пользователь нажимает на изображение (которое содержит href), и они переходят на предыдущую страницу, они могут вернуться к изображению, на которое смотрят, вместо стандартного поведения перехода к первому изображению.

Согласно API-интерфейсу OwlCarousel2 (который на самом деле сильно отличается от OwlCarousel1), чтобы получить текущий элемент, вы можете сделать этот:

function callback(event) {
// Provided by the core
var element   = event.target;         // DOM element, in this example .owl-carousel
var name      = event.type;           // Name of the event, in this example dragged
var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
var items     = event.item.count;     // Number of items
var item      = event.item.index;     // Position of the current item
// Provided by the navigation plugin
var pages     = event.page.count;     // Number of pages
var page      = event.page.index;     // Position of the current page
var size      = event.page.size;      // Number of items per page }

В частности, используя event.item.index, Мой код сделал именно это! Но я не могу получить текущий индекс! Моя ошибка: Uncaught TypeError: Cannot read property 'item' of undefined под консолью Chrome.

Любая помощь от гуру JS будет высоко ценится!

Я попытался выполнить поиск по всему StackOverflow, а также по API-интерфейсу OwlCarousel2, чтобы посмотреть, смогу ли я это сделать, однако не повезло.

Я также проверил эту тему: добавить / удалить имя привязки из текущей ссылки без обновления