Как выделить активный пункт Owl-Carousel 2.3.4???

Question

[MFNIK]

Есть карусель с навигацией выбора текущего элемента.

<div class="owl-carousel">
  <div class="item" id="one" data-hash="one">1</div>
  <div class="item" id="two" data-hash="two">2</div>
  <div class="item" id="tree" data-hash="tree">3</div>
  <div class="item" id="four" data-hash="four">4</div>
  <div class="item" id="five" data-hash="five">5</div>
  <div class="item" id="six" data-hash="six">6</div>
  <div class="item" id="seven" data-hash="seven">7</div>
  <div class="item" id="eigth" data-hash="eigth">8</div>
</div>
<hr>
<a class="button secondary url" href="#one">one</a>
<a class="button secondary url" href="#two">two</a>
<a class="button secondary url" href="#tree">tree</a>
<a class="button secondary url" href="#four">four</a>
<a class="button secondary url" href="#five">five</a>
<a class="button secondary url" href="#six">six</a>
<a class="button secondary url" href="#seven">seven</a>
<a class="button secondary url" href="#eigth">eigth</a>

Вот код вывода

$(function() {  
var owl = $('.owl-carousel');  
    owl.owlCarousel({
      items: 4,
      dots: false,
      loop: true,
      margin: 10,
      slideBy: 1,
      URLhashListener: true,
      autoplayHoverPause: true,
      startPosition: 'URLHash'
  });    
});

Помогите добавить класс элементу <div class="item <i>ACTIVE</i>"></div>
при выборе его по ссылке.
Спасибо!

PS По логике сравнивать data-hash="one" или id="one" с URL (www.domen.ru/carousel#one), но как отсечь все кроме слова "one" знаний не хватает.

Вот PEN

PS2 Готов заплатить за выполнение задания!

Comments

[Адель Халитов]

'id="one"'.split("=")[1].slice(1, -1)

'www.domen.ru/carousel#one'.split("#")[1]

Вот их и сравнивать

В чем проблема, на каком шаге возникает сложность?

[MFNIK]

Адель Халитов, ну я не такой знаток в этом моменте, что делают split и slice понимаю, а что вы написали не понимаю(((

Answer 1

[Родион Мещеряков]

https://codepen.io/anon/pen/mvoYRB

Добавляется класс highlighted, который выделяет текущий элемент красным цветом

Comments

[MFNIK]

Дело в том что по заданию есть слайдер с товарами в одной секции страницы, и карусель с теми же товарами в другой секции страницы. У слайдера есть кнопка подробнее, с якорной ссылкой. При нажатии на неё страница скролит к секции где находится карусель, и отображает нужный товар.
Данный вариант более менее подходит для данной задачи. Все работает, кроме выделения активного пункта, и в документации нет ни чего по этому поводу.
Единственный вариант что пришёл в голову, это сравнивать data-hash=‘value’ ссылок с url (www.site.ru/product#value) и присваивать класс нужному Элементу, но кажется это какой то костыль.

[MFNIK]

В вашем примере вы выделяете ссылку, а мне нужно выделить именно слайдер.

[Родион Мещеряков]

Выделить текущий активный слайд? Так карусель сама присваивает нужный класс. Можно использовать его и стилизовать (выделить) как вам хочется

[Родион Мещеряков]

Обновил свой первоначальный ответ

[MFNIK]

Родион Мещеряков, карусель присваивает класс ACTIVE всем видимым элементам (items: 3 или 4
или 5), а мне нужно выделить тот слайд который был выбран ссылкой. Понятно что у него по умолчанию будет присвоен класс active каруселью, но если я например поменяю у него цвет, для выделения, данная стилизация сработает и на остальные (в моем случае 3) слайда. Следовательно нужно присвоить любой другой класс.

[MFNIK]

Родион Мещеряков, не посмотрел сразу, спасибо вы меня очень выручили!!! Именно то что нужно!

[Александр Кокорин]

Родион Мещеряков, Добрый день. Подскажите пожалуйста, как вы все таки реализовали первый вариант с добавление класса к кастомной ссылке активного слайда, а не к самому слайду.
Спасибо заранее за ответ :)

Answer 2

[Антон]

Как сделать тоже самое только без hash, так как он висит в адресной строке?