Comment activer Flexslider sur mobile uniquement ?

Perspikas
Javascript

Bonjour,

Sur mon site je possède une rangée (row) contenant 3 colonnes 33%.
J'ai également ajouté le script "Flexslider" sur mon site.

Je souhaiterais savoir comment faire pour transformer chacune de ces 3 colonnes en slide unique en mobile, et ainsi transformer cela en un carrousel Flexslider, dès qu'on passe par exemple sous une résolution de 1024px.

J'ai suivi plusieurs posts sur des forums étrangers, mais aucune méthode n'a marché. J'ai même utilisé la méthode de "media change"

J'ai entendu parler de la fonction destroyslider, de minItems=1, maxItems =1...

Pouvez-vous me donner un exemple simple et qui marche ?

Merci d'avance

7 réponses

betaWeb
Réponse acceptée

Donc c'est le second cas :
Tu gères l'affichage du conteneur du slider via les media queries, et en JS, tu détectes lorsque l'élément est visible, et dès que c'est le cas tu lances ton slider.

HTML :

<div class="slider" data-js="slider"></div>

CSS (mobile-first) :

.slider {
  display: block;
}

@media all and (min-width: 992px) {
  .slider {
    display: none;
  }
}

JS :

(function ($, window) {

  var $slider = $('[data-js="slider"]'),
        sliderLaunched = false;

  function launchSlider () {
      if ($slider.is(':visible') && !sliderLaunched) {
        $slider.flexslider({
            /* options */
        });

        sliderLaunched = true;
      } else {
        // Ici il faudrait destroy le slider, mais le plugin n'a aucune méthode permettant de le faire (très étonnant...)
      }
  }

  launchSlider();

  $(window).on('resize', function () {
    launchSlider();
  });

})(jQuery, window);
betaWeb

Salut,

Tu peux utiliser le user agent (https://github.com/hgoebl/mobile-detect.js/) afin de détecter le navigateur et le device sur lequel tu te trouve.
https://github.com/hgoebl/mobile-detect.js/ pa ex.

Perspikas
Auteur

Merci de ta réponse betaWeb !

Mais ensuite ? Comment gérer le comportement flexslider qui doit s'activer OU se désactiver ?

betaWeb 
var md = new MobileDetect(window.navigator.userAgent);

if (!md.mobile()) {
  $('.flexslider').flexslider({
    /* options */
  });
}
Perspikas
Auteur

Je pense que c'est une idée, mais ca ne répond pas exactement à ce que je veux faire.

Je veux que le slider s'active dans certaines résolutions (dont mobile), mais si on remet en format desktop (responsive), le flexslider se désactive (retour aux columns classiques).

Sur le site aramis auto, c'est exactement ce que je veux faire : https://www.aramisauto.com/

(bas de page, les 3 colonnes sur fond gris clair)

betaWeb

Tu veux qu'il "s'active" ou qu'il soit visible ? Parce que ce n'est pas DU TOUT la même chose.
Dans le premier cas, tu dois gérer cela via ton CSS (media queries), et dans le second via le CSS ET le JS (avec jQuery, tu peux utiliser le pseudo-selecteur :visible).

Perspikas
Auteur

Je ne parle que d'activation ou de déclechement.
Aramis Auto est un parfait exemple. Sur desktop, il y a 3 colonnes. Ces colonnes restent toujours visibles.
Dès qu'on arrive en petite résolution, la colonne s'élargit en 100% de la page, et se lance alors le carrousel automatique.
Quand on réagrandit la résolution, les 3 colonnes se remettent en 33%-float left, et le défilement auto s'arrête.