nico3333fr / jquery-accessible-carrousel-aria Goto Github PK

When there are multiple instances of the carrousel on one page, the logic for hiding controls when a carrousel only contains one item fails.

I suspect the line:

if ($carrousel_container.length && $carrousel_content.length > 1)

is incorrect or insufficient because carrousel_content.length is checked on the entire document instead of on a per carrousel-instance basis. When you have multiple carrousel instances in a document, the carrousel_content.length will always be > 1.

Issue

A lot of the single web app use /#/ as there route manager and control their pages, however, right now the plugin will takes the window.location.hash as value and try to replace anchor tag #, so it will try to get hash like this #/index and transfer into this /index. this is causing the issue since the / is not removed, jquery can not select element properly and raise systax error.

vendor.js:1472 Uncaught Error: Syntax error, unrecognized expression: #/index.carrousel__content
    at Function.Sizzle.error (vendor.js:1472)
    at tokenize (vendor.js:2086)
    ...

Suggestion

Use another way to process the hash value.

For more optimization, like SEO, update demo code

<div class="carrousel__content">
    <h3>A first panel</h3>
    <p>Here the content.</p>
</div>

by

<section class="carrousel__content">
    <header><h3>A first panel</h3><header>
    <p>Here the content.</p>
</section>

See the « publishing npm package » documentation.

In case of generation from ajax, for example.

This avoid problems in Sharepoint and in forms.

Salut,

J'ai découvert avec joie qu'on pouvait mettre du code HTML dans l'attribut "data-carrousel-btn-previous-text" parce que j'utilise une police d'icônes. Exemple :
<span class='icon-circle-arrow' aria-hidden='true'></span><span class='visually-hidden'>Show previous panel</span>

Par contre, je vois que dans l'attribut "title" du bouton, les balises sont présentes aussi.
Est-ce qu'il est possible de supprimer les balises HTML lors de l'injection dans le "title" ?

Merci pour ton aide !

If you're using data-carrousel-existing-hx="hx" and the existing hx has some html inside,

<h2><a href="#" class="blue">blablabl </a></h2>

the control generation will fail miserably using $carrousel_span_text_final = $this.find($carrousel_existing_hx).html();

It should be remplaced for .text() method.

A better design would be to make it a real jQuery plygin that takes a selector to enable (and could takes some options for configuration

Suggested by @goetsu : when you use next/prev buttons, instead on going back to control list, go on the content tab (better for keyboard experience)

sur ios après activation des boutons next / prev le focus reste sur le bouton au lieu d'aller sur le contenu mis à jour. A mon avis c'est encore le bug de gestion du focus qui est en cause. Je suppose qu'il faut donc ajouter le setTimeout 0 pour que cela fonctionne

The lib is nice but it should takes some callbacks as option to allow custom js hookin or trigger some custom events to hook in

cheers

I'm getting the following error:

Uncaught ReferenceError: $activated is not defined

And it points me to this line: jquery-accessible-carrousel-aria.js:464

I'm using out of the box jQuery v2.2.4