Пустые элементы с Owl Carousel при нажатии на клавиатуре для ссылок внутри элементов

Я использую текущую стабильную версию Owl Carousel (1.3.2) для карусели с одним элементом. У меня включены кнопки «предыдущий» и «следующий».

Несколько элементов в карусели имеют ссылки, например. <a href="page.html" class="button">Find out more</a>.

При использовании клавиатуры (в Chrome) для перехода по веб-странице ссылки внутри карусели получают фокус, и это здорово. Однако, если пользователь затем использует кнопки «предыдущий» и «следующий» с помощью мыши для перехода к следующему элементу карусели, он будет пустым. Все остальные элементы карусели после элемента, содержащего ссылку внутри него, также пусты. Нет контента вообще.

При проверке карусели с помощью Chrome DevTools на самом деле кажется, что карусель не движется, хотя ссылки внутри элемента сфокусированы и видны. это, кажется, становится действительно запутанным.

Кто-нибудь сталкивался с подобными вещами с Owl Carousel (или любой другой каруселью) раньше? Есть ли что-нибудь, что я мог бы попытаться заставить карусель двигаться правильно, если ссылка внутри элемента получает фокус?


carousel jquery owl-carousel jquery-plugins keyboard-navigation
person benspencer    schedule 18.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Добавление tabindex="0" к каждому элементу карусели помогло значительно улучшить навигацию с помощью клавиатуры. Кроме того, вместо того, чтобы использовать кнопки «предыдущая» и «следующая» по умолчанию <div>, которые производит Owl Carousel, я создал свою собственную, используя вместо этого <a>. Информация о том, как это сделать, находится здесь: http://owlgraphic.com/owlcarousel/demos/custom.html

Эти обновления помогли упростить навигацию по Owl Carousel, используя только клавиатуру. Все слайды отображаются после каждого нажатия вкладки на клавиатуре, и все ссылки внутри слайда также получают фокус. Кроме того, хорошо работает табуляция назад — слайды отображаются в обратном порядке по мере того, как пользователь перемещается назад.

Единственная оставшаяся проблема заключается в том, что карусель не «двигается» должным образом. т.е. пагинация не обновляется. Поэтому, если бы пользователь нажимал кнопки «Далее» или «Предыдущий» после перехода где-то в середине ползунка, отображались бы пустые слайды (как упоминалось в моем исходном запросе). Однако я думаю, что с улучшенной навигацией с помощью клавиатуры это стало меньшей проблемой, поскольку теперь пользователи могут просматривать весь контент — они ничего не упускают, используя только клавиатуру.

HTML:

<div class="slider-wrapper">

    <div class="owl-nav">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>

    <div class="slider">

        <div tabindex="0">
            <h1>Content</h1>
            <p>Content</p>
        </div>

        <div tabindex="0">
            <h1>Content</h1>
            <p><a href="page.html" class="button">Find out more</a></p>
        </div>

        <div tabindex="0">
            <h1>Content</h1>
        </div>

    </div>

</div>

jQuery:

var owl = $(".slider");

owl.owlCarousel({
    singleItem: true,
    theme: "slider",
    mouseDrag: false,
    slideSpeed : 750
});   

$(".owl-nav .next").click(function(e){
    e.preventDefault();
    owl.trigger('owl.next');
});

$(".owl-nav .prev").click(function(e){
    e.preventDefault();
    owl.trigger('owl.prev');
});
person benspencer    schedule 18.12.2014