Пустые элементы с Совой Карусель, если вкладка с клавиатуры для ссылок внутри элементов

Question

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

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

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

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

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

Answer 1

Добавление 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');
});