Étiquette : bxSlider

[jQuery][bxSlider] Les liens dans le slider ne fonctionnent pas

Solution: stevenwanderski/bxslider-4: links in sliders aren’t working – Error in the latest version of Chrome (73.0.3683.75).

I might have found a reliable fix for this. The problem happens in Chrome because it doesn’t fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn’t fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

to this:

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

[bxSlider][jQuery] Synchroniser la navigation dans deux carousels distincts

http://jsfiddle.net/eMAtL/

[Bx Slider, responsive] Les images ne s’affichent pas jusqu’à ce qu’on redimensionne la fenêtre du navigateur

bxslider isn’t displaying images until page resize with responsive design

Juste après le code qui initialise le carousel, placer:


Responsive image slider bxslider only works on page reload

As it stands, bxslider is initializing before the images have had time to load, calculating 0 width and height for them, thus giving them no appearance.

Plug-in imagesloaded qui permet d’exécuter du code une fois que les images sont chargées.

[bxSlider] Les slides n’ont pas la même hauteur et s’empilent au lieu de s’afficher côte à côte

Edit : pas testé, mais voir pour utiliser l’option adaptiveHeight de bxSlider.

Problème : Les slides n’ont pas la même hauteur et s’empilent au lieu de s’afficher côte à côte.

slider-pile

Update : une solution un peu plus propre (sans utiliser javaScript) :


Solution : appliquer la valeur de la hauteur définie pour l’élément qui possède la classe .bx-viewport à chaque élément slide (des éléments li dans notre exemple).

slider-pile-ok

[bxSlider] Le slider ne s’affiche pas correctement jusqu’à ce que je redimensionne la fenêtre du navigateur

Problème : Le slider ne s’affiche pas correctement (voir, pas du tout !!!) jusqu’à ce que je redimensionne la fenêtre du navigateur.
Solution : Délayer l’affichage du slider avec la méthode jQuery setTimeout en encapsulant ce premier dans une fonction :

Autre méthode (moins felxible): si les slides ont toutes systématiquement la même hauteur, pas besoin de JS. On peut également appliquer via CSS :

[bxSlider] Afficher la pagination seulement à partir d’un certain nombre de slides

Ce nombre de slides peut être différent en fonction du breakpoint dans le cas d’un site Responsive.