Carousels - Waterwheel Carousel

→ Waterwheel Carousel : un carousel jQuery, qui peut être intégré au coeur de adHoc, ou bien être utilisé dans un Iframe.

Ce carousel est une création de Brian Osborne : https://www.bkosborne.com

Il est édité sous les licences GPLv3 et MIT.

Le zip d'intégration est téléchargeable ici : WaterwheelCarousel.zip. Il a été placé dans le dossier images à la racine d'adHoc.

arborescence-WaterwheelCarousel

Dans le dossier imagesWwC, vous trouverez toutes les images de ce tutoriel et du tutoriel suivant (Waterwheel Carousel dans un Iframe) : vous pouvez évidemment le supprimer totalement et adapter les tutoriels à vos images dans vos propres dossiers.

Dans le dossier WaterwheelCarousel vous trouverez :
→ Dans le dossier js il y a le fichier jquery.waterwheelCarousel.js et le fichier WwC-H1.js utilisé pour cet exemple du tutoriel. Mais également le fichier jquery-3.1.1.js qui n'est nécessaire que pour l'utilisation dans des Iframes (vous pouvez le supprimer si vous n'en n'avez pas l'usage, voir page suivante).
→ Dans le dossier css il y a le fichier WwC-H1.css utilisé pour cet exemple du tutoriel.
→ Dans le dossier images, il y a les imagettes de navigation (il y en a 4 jeux, mais vous pouvez ajouter ou créer les vôtres).

Dans ce zip, vous trouverez également les 4 fichiers : WwC-H1.html WwC-H2.html WwC-V1.html WwC-V2.html qui sont présentés dans la page suivante dans des Iframes (vous pouvez les supprimer si vous n'en n'avez pas l'usage).

Il est possible de créer des liens sur les images, mais pas de titres (hélas...). Des réglages sont possibles dans le style et le script du carousel. Il peut être orienté horizontalement ou verticalement, des effets différents peuvent être réalisés et notamment l'effet "arching" comme ci-dessous. Il serait possible d'afficher plusieurs carousels Waterwheel sur la même page, mais ceux-ci devraient avoir exactement les mêmes caractéristiques. Dans les exemples de la page suivante, les carousels sont dans des Iframes, ce qui permet d'obtenir des effets différents à chaque fois.

Ci-dessous, il y a un lien actif sur quelques images lorsqu'elles sont centrées. Mais ce n'est pas une obligation... Cliquer sur un des éléments non central du carousel l'amène au centre et met le carousel en pause, les flèches de navigation sont toujours actives. Cliquer sur le bouton de navigation au centre réinitialise le carousel.

Au début du code source de la page ont été déclarés les trois fichiers nécessaires au fonctionnement du carousel ainsi :

 
<script type="text/javascript" src="images/WaterwheelCarousel/js/jquery.waterwheelCarousel.js"></script>
<script type="text/javascript" src="images/WaterwheelCarousel/js/WwC-H1.js"></script>
 <link charset="utf-8" href="images/WaterwheelCarousel/css/WwC-H1.css" rel="stylesheet" />

La première ligne est indispensable. Mais il est possible de ne pas déclarer les deux suivantes et de les développer dans le code source, voir ci-dessous, encadrées de leurs balises respectives.

Ci dessous le script précisant les caractéristiques de fonctionnement du carousel, nommé ici WwC-H1.js ou à développer encadré des balises [script type="text/javascript"]...[/script] . Toutes les options sont commentées pour vous permettre d'adapter le carousel.


$(document).ready(function () {
 var carousel = $("#carousel").waterwheelCarousel({          
  movingToCenter: function ($item) {
   $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br />
');
  },
  movedToCenter: function ($item) {
   $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br />
');
  },
  movingFromCenter: function ($item) {
   $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br />
');
  },
  movedFromCenter: function ($item) {
   $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br />
');
  },
  clickedCenter: function ($item) {
   $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br />
');
  }
 });

 $('#prev').bind('click', function () {
  carousel.prev();
  return false
 });

 $('#next').bind('click', function () {
  carousel.next();
  return false;
 });

 $('#reload').bind('click', function () {
  newOptions = eval("(" + $('#newoptions').val() + ")");
  carousel.reload(newOptions);
  return false;
 });

});

$.fn.waterwheelCarousel.defaults = {
// Quelques options possibles

orientation: 'horizontal',  // 'horizontal' ou 'vertical' pour l'orientation du carousel
autoPlay: 2500,  // temps d'affichage d'une image au centre en millisecondes (peut être négatif=rotation inverse). 0 pour manuel.
speed: 1000,  // temps de l'animation en millisecondes
startingItem: 1,  // item à placer au centre du carousel. Mettre 0 pour auto
flankingItems: 3,  // nombre d'items visibles de chaque côté de l'image centrale
separation: 175,  // distance entre les items du carousel
separationMultiplier: 0.6,  // coefficient multiplicateur pour les distances des items additionnels
Axe: 0,  // Position de l'Axe de l'image centrale : par rapport à "top" pour horizontal, par rapport à "left" pour vertical, Mettre 0 pour auto
AxeOffset: 15,  // distance à l'Axe de l'image centrale pour les items additionnels. négatif > bas ou droite. positif > haut ou gauche (effet "arching")
AxeOffsetMultiplier: 0.7,  // coefficient multiplicateur pour les distances à l'Axe de l'image centrale pour les items additionnels
sizeMultiplier: 0.7,  // coefficient multiplicateur pour les tailles des items additionnels
opacityMultiplier: 1.0,  // coefficient multiplicateur pour l'opacité des items additionnels

animationEasing: 'linear',  // type d'animation : linear, easeInOutCubic, easeInExpo... voir ici par exemple : https://easings.net/fr
quickerForFurther: false,  // true or false pour amener rapidement un item additionnel cliqué au centre
edgeFadeEnabled: false,  // disparition et apparition items en bordure : true pour effet de "fade", false pour effet de "slide" derrière le carousel
keyboardNav: false,  // true or false pour utiliser les touches du clavier
imageNav: true,  // true or false pour cliquer un item additionnel et l'amener au centre
preloadImages: true,  // true or false pour précharger les images avant le lancement du carousel (peut être long)
linkHandling: 2,  // 1 pour désactiver les liens éventuels, 2 pour l'activer sur l'image centrale
forcedImageWidth: 0,  // spécifier la largeur de toutes les images. 0 pour automatique
forcedImageHeight: 0,  // spécifier la hauteur de toutes les images. 0 pour automatique

// callback functions **** IMPORTANT NE PAS SUPPRIMER ****
movingToCenter: $.noop,  // fired when an item is about to move to the center position
movedToCenter: $.noop,  // fired when an item has finished moving to the center
clickedCenter: $.noop,  // fired when the center item has been clicked
movingFromCenter: $.noop,  // fired when an item is about to leave the center position
movedFromCenter: $.noop  // fired when an item has finished moving from the center
};

Ci dessous le style du carousel, nommé ici WwC-H1.css ou à développer encadré des balises [style type="text/css"]...[/style] . Commenté pour vous permettre d'adapter le carousel. Notez qu'une règle @media screen fait passer la largeur du conteneur à 99% pour les mobiles.


#carousel { /*attributs du conteneur*/
	width:95%; /*largeur en % ou en pixels*/
	border:1px solid #c0c0c0; /*épaisseur, nature, couleur de la bordure*/
	height:220px; /*hauteur*/
	position:relative;
	margin:0 auto; /*marges extérieures*/
	clear:both;
	overflow:hidden;
	background:rgba(0, 0, 0, .9); /*couleur de fond*/
}
#carousel img {
	visibility:hidden;
	cursor:pointer;
}
@media screen and (max-width: 900px), screen and (max-device-width: 900px) { /* inférieur à 900px de largeur (MOBILE) */
#carousel { /*attributs du conteneur*/
	width:99%; /*largeur en %*/
}
}

Et enfin le code de mise en place du carousel, où vous le souhaitez dans la page :


<div id="carousel">
<a href="https://pixabay.com/fr/" target="_blank"><img src="images/imagesWwC/Image01.jpg" id="item-1" /></a>
<a href="https://pixabay.com/fr/" target="_blank"><img src="images/imagesWwC/Image02.jpg" id="item-2" /></a>
<a><img src="images/imagesWwC/Image03.jpg" id="item-3" /></a>
<a><img src="images/imagesWwC/Image04.jpg" id="item-4" /></a>
<a><img src="images/imagesWwC/Image05.jpg" id="item-5" /></a>
<a><img src="images/imagesWwC/Image06.jpg" id="item-6" /></a>
<a><img src="images/imagesWwC/Image07.jpg" id="item-7" /></a>
<a><img src="images/imagesWwC/Image08.jpg" id="item-8" /></a>
<a><img src="images/imagesWwC/Image09.jpg" id="item-9" /></a>
<a><img src="images/imagesWwC/Image10.jpg" id="item-10" /></a>
<a href="https://pixabay.com/fr/" target="_blank"><img src="images/imagesWwC/Image11.jpg" id="item-11" /></a>
<a href="https://pixabay.com/fr/" target="_blank"><img src="images/imagesWwC/Image12.jpg" id="item-12" /></a>
</div><!-- fin carousel -->
<div style="text-align:center; margin-top:2px;"><!-- imagettes navigation carousel -->
<a href="#" id="prev"><img src="images/WaterwheelCarousel/images/backwardO.png" /></a> 
<a href="#" id="reload"><img src="images/WaterwheelCarousel/images/refreshO.png" /></a> 
<a href="#" id="next"><img src="images/WaterwheelCarousel/images/forwardO.png" /></a>
</div><!-- fin imagettes navigation carousel -->

Respectez bien pour chaque item la présence ou non d'un lien, un chemin correct pour l'image concernée, un id différent. Pour les imagettes de navigation, respectez les id et les chemins corrects pour ces imagettes.

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.




Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels