Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

Javascript

jQuery

RDFFav

L’unique carrousel « Owl Carousel 2 »

Un carrousel ou diaporama tactile basé jQuery des plus sensibles.diaporama, carrousel, jQuery, photo, animation

Owl Carousel 2
INSTALLATION DÉMO DOCUMENTATION

Beaucoup d’eau a coulé depuis la première « Bannières rotatives » des Trucsweb. Et malgré tout, encore aujourd’hui, aucun site ne peut se passer d’un carrousel. Je me souviens quand jQuery est arrivé comme un boulet de canon. Des années d’effort pour se rendre compte qu’on n’arrivera jamais à rivaliser avec la centaine de programmeurs de jQuery. Outre les problèmes de compatibilité d’alors, parfois pour de simples petits détails esthétiques : la transparence, les transitions et surtout l’animation.

Aujourd’hui, tout aussi gratuit, le HTML5, le CSS3 et le Javascript 6 remplacent efficacement jQuery à plusieurs égards. Et même si jQuery est lourd, la plupart des gabarits l’utilisent, alors pourquoi pas! Je me suis donc mis à scruter le web pour trouver un bon carrousel. J’ai trouvé de tout, j’ai même acheté quelques carrousels, pour la plupart utilisés. Mes recherches furent laborieuses, mais aucun n’était véritablement satisfaisant. Je cherchais, il est vrai, un carrousel adaptatif (responsive), mais aussi tactile (Touch enabled), HTML5 et dans son plus simple appareil, un conteneur d’image! Tant qu’à payer!

C’est alors que je suis tombé sur ce petit bijou. Simple clair et net « Owl Carousel » est certainement le meilleurs de sa catégorie et entièrement gratuit! Si les boss de bombardier peuvent augmenter leurs millions de profit de 45% en une seule année pendant que les actions de la compagnie baissent d’autant, ce n’est certes pas pour payer les programmeurs analystes ;-3

Éprouvé depuis des années déjà, je vous garantis que ce script offre une grande flexibilité en toute simplicité. Peu importe si vous êtes un débutant ou un utilisateur avancé, Owl Carousel est un jeu d’enfant. Et si vous avez des caprices, aucun problème, avec une base jQuery tout est possible!

Quelques fonctionnalités
  • Défilement infini
  • Item centré
  • Vitesse intelligente
  • Remplissage de l’espace
  • Marge par l’item
  • Adaptatif (responsive)
  • Différentes largeurs
  • Évènements de rappel (Callback)
  • RTL
  • Support YouTube/Vimeo/vzaar (avec récupération des vignettes)
  • Navigation avec ancrages
  • Items fusionnés
  • et plus encore...
- Compatibilité
  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11/Edge
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

Exemple tout simple
<!doctype html>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css" />	
  </head>
  <body>
    <h5>Avec image</h5>
    <div class="owl-carousel">
      <img src="https://images.pexels.com/photos/97077/pexels-photo-97077.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 1" />
      <img src="https://images.pexels.com/photos/239898/pexels-photo-239898.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 2" />
      <img src="https://images.pexels.com/photos/177598/pexels-photo-177598.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 3" />
      <img src="https://images.pexels.com/photos/330771/pexels-photo-330771.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 4" />
      <img src="https://images.pexels.com/photos/325111/pexels-photo-325111.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 5" />
    </div>
    <hr />
    <h5>Avec texte</h5>
    <div class="owl-carousel owl-theme">
      <div class="item"><h4>1</h4></div>
      <div class="item"><h4>2</h4></div>
      <div class="item"><h4>3</h4></div>
      <div class="item"><h4>4</h4></div>
      <div class="item"><h4>5</h4></div>
      <div class="item"><h4>6</h4></div>
      <div class="item"><h4>7</h4></div>
      <div class="item"><h4>8</h4></div>
      <div class="item"><h4>9</h4></div>
      <div class="item"><h4>10</h4></div>
      <div class="item"><h4>11</h4></div>
      <div class="item"><h4>12</h4></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>

    <script>
    $(document).ready(function(){
      $('.owl-carousel').owlCarousel({
        autoplay:true,
        loop:true
      })
    });
    </script>
  </body>
</html>

Pour plus d’information, consultez la section « Doc » du Owl Carousel 2.

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

10/10 sur 1 revues.
       Visites : 516 - Pages vues : 553
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@