02
JUIL

Swiper: Un slider tactile pour applications web mobiles

Publié le 02/07/13 à 08h55 par DJo

Swiper est un framework javascript permettant de créer des sliders tactiles dédiés aux applications web mobiles.

Swiper est un framework javascript permettant de créer des sliders tactiles dédiés aux applications web mobiles.

Initialement designé pour ressembler au slider interne des applications iOS, Swiper permet de créer des sliders web tactiles pour tous les terminaux mobiles: iOS, Android, Windows Phone...

Le slider fonctionne aussi avec les navigateurs web modernes grâce à une fonction simulant le glissé du doigt avec la souris.

Plus qu'un simple plugin JS, c'est un framework complet qui vous permettra de créer des applications et widgets avancés.

Swiper - Création de carousels tactiles 3D

Vous pourrez ainsi recréer l'effet de carousel bien connu dans les Store d'applications ... Il existe déjà des plugins pour améliorer l'expérience utilisateur en utilisant Swiper: Un plugin de 3D Flow et un plugin de scrollbar.

Le script est compatible avec jQuery ou ZeptoJS mais ne nécessite pas de framework particulier pour fonctionner.

Les animations et transitions utilisent au maximum l'accélération matérielle du smartphone quand disponible rendant le slider très fluide et agréable.

Côté mise en place voici le markup HTML:

<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        Contenu du premier slide ici
      </div>
      
      <!--Second Slide-->
      <div class="swiper-slide">
        Contenu du 2eme slide ici
      </div>
      
      <!--Third Slide-->
      <div class="swiper-slide"> 
        Contenu du 3eme slide ici
      </div>
      <!--Etc..-->
  </div>
</div>

Vous devrez définir la hauteur et longueur du slider dans la feuille CSS du framework.

Puis appeler le Javascript avec ou sans options:

$(function(){
  var mySwiper = $('.swiper-container').swiper({
    mode:'horizontal',
    loop: true
  });
});

Dans les options vous pourrez définir si vous souhaitez ou non un mode boucle infini, un mode slideshow automatique, la gestion de la pagination, le nombre de slides ...

La documentation en ligne de l'API est complète, vous n'aurez aucun mal à personnaliser le slider selon vos besoins.

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web