Étiquette : bxSlider

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

30/10/2019 / admin

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:

        if (slider.viewport.get(0).setPointerCapture) {
          slider.pointerId = orig.pointerId;
          slider.viewport.get(0).setPointerCapture(slider.pointerId);
        }

if (slider.viewport.get(0).setPointerCapture) {

slider.pointerId = orig.pointerId;

slider.viewport.get(0).setPointerCapture(slider.pointerId);

}

to this:

        if (e.target.setPointerCapture) {
          slider.pointerId = orig.pointerId;
          e.target.setPointerCapture(slider.pointerId);
        }

if (e.target.setPointerCapture) {

slider.pointerId = orig.pointerId;

e.target.setPointerCapture(slider.pointerId);

}

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

23/03/2018 / admin

http://jsfiddle.net/eMAtL/

<ul class="bxslider" >
    <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px"/></li>
    <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px"/></li>
    <li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-54.jpg" height="200px"/></li>
    <li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-01.jpg" height="200px"/></li>
    <li>  <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px"/></li>
    <li>                                        <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px" /></li>
</ul>

<ul class="bxslider1">
    <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>

</ul>

</ul>

var slider = $('.bxslider').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis
});
var slider1 = $('.bxslider1').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis
});

function doThis(ele, old, newi){
    slider.goToSlide(newi);
    slider1.goToSlide(newi);
}

var slider = $('.bxslider').bxSlider({

onSlideNext: doThis,

onSlidePrev: doThis

});

var slider1 = $('.bxslider1').bxSlider({

onSlideNext: doThis,

onSlidePrev: doThis

});

function doThis(ele, old, newi){

slider.goToSlide(newi);

slider1.goToSlide(newi);

}

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

08/02/2018 / admin

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

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

$('.bx-viewport').css('height', '');

1	$('.bx-viewport').css('height', '');

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

16/08/2016 / admin

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.

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

.wfslider {
    white-space: nowrap;
    font-size: 0;
}
.wfslider > li {
    display: inline-block;
    vertical-align: top;
    float: none!important;
}

.wfslider {

white-space: nowrap;

font-size: 0;

}

.wfslider > li {

display: inline-block;

vertical-align: top;

float: none!important;

}

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).

function setEqualHeight(){
    jQuery('.bx-viewport').each(function(){
        var getSlideHeight = jQuery(this)[0].style.height;
        jQuery(this).find('[style*="float"]').css('height', getSlideHeight);
    });
}
setTimeout(setEqualHeight, 4000);

function setEqualHeight(){

jQuery('.bx-viewport').each(function(){

var getSlideHeight = jQuery(this)[0].style.height;

jQuery(this).find('[style*="float"]').css('height', getSlideHeight);

});

}

setTimeout(setEqualHeight, 4000);

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

16/08/2016 / admin

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 :

function fbSlider(){
    jQuery('.wfslider').bxSlider4({
        slideWidth: 350,
        minSlides: 1,
        maxSlides: 2,
        moveSlides: 1,
        slideMargin: 30,
        controls: false,
    });
}
setTimeout(fbSlider, 2000);

function fbSlider(){

jQuery('.wfslider').bxSlider4({

slideWidth: 350,

minSlides: 1,

maxSlides: 2,

moveSlides: 1,

slideMargin: 30,

controls: false,

});

}

setTimeout(fbSlider, 2000);

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 :

.bx-wrapper .bx-viewport{ height: auto !important; }

1	.bx-wrapper .bx-viewport{ height: auto !important; }

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

11/08/2016 / admin

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

$(window).bind('load', function() {
    $('.bx-pager').each(function(){
        var getSlideCount = $(this).children('.bx-pager-item').length;
        $(this).attr('data-slide-count', getSlideCount);
    });
});

$(window).bind('load', function() {

$('.bx-pager').each(function(){

var getSlideCount = $(this).children('.bx-pager-item').length;

$(this).attr('data-slide-count', getSlideCount);

});

// Smartphones only
@media (max-width: $screen-xs-max) {
	.bx-wrapper{
		.bx-pager[data-slide-count="1"]{
			display: none;
		}
	}
}

// Tablets only
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
	.bx-wrapper{
		.bx-pager[data-slide-count="1"],
		.bx-pager[data-slide-count="2"]{
			display: none;
		}
	}	
}

// All Desktops only (Small + Large)
@media (min-width: $screen-md-min) {
	.bx-wrapper{
		.bx-pager[data-slide-count="1"],
		.bx-pager[data-slide-count="2"],
		.bx-pager[data-slide-count="3"]{
			display: none;
		}
	}	
}

// Smartphones only

@media (max-width: $screen-xs-max) {

.bx-wrapper{

.bx-pager[data-slide-count="1"]{

display: none;

}

// Tablets only

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {

.bx-wrapper{

.bx-pager[data-slide-count="1"],

.bx-pager[data-slide-count="2"]{

display: none;

}

// All Desktops only (Small + Large)

@media (min-width: $screen-md-min) {

.bx-wrapper{

.bx-pager[data-slide-count="1"],

.bx-pager[data-slide-count="2"],

.bx-pager[data-slide-count="3"]{

display: none;

}

Articles récents

Catégories

Archives

Méta

Étiquette : bxSlider

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

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

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

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

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