Carousels - Waterwheel Carousel dans un Iframe

→ Waterwheel Carousel : un carousel jQuery, 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 contenant tous les fichiers est téléchargeable ici : WaterwheelCarousel.zip. Il a été placé dans le dossier images à la racine d'adHoc.

Dans cette page, c'est l'utilisation du même procédé, avec les mêmes fichiers installés comme pour la page précédente mais appelés dans des Iframes.

Ci-dessous, 4 exemples et les fichiers .html de ces exemples. Notez que dans chacun de ces fichiers, une règle @media screen fait passer la largeur du conteneur à 99% pour les mobiles.

→ Waterwheel Carousel Horizontal 1

NB : C'est strictement le même exemple que celui de la page précédente, les réglages sont donc les mêmes.

Ci-dessous le code de l'Iframe qui appelle le fichier WwC-H1.html.


<iframe scrolling="no" src="images/WwC-H1.html" style="background:transparent;" width="100%" height="280px" frameborder="0"></iframe>

Ci-dessous le code du fichier WwC-H1.html.

→ Waterwheel Carousel Horizontal 2

Ci-dessous le code de l'Iframe qui appelle le fichier WwC-H2.html.


<iframe scrolling="no" src="images/WwC-H2.html" style="background:transparent;" width="100%" height="300px" frameborder="0"></iframe>

Ci-dessous le code du fichier WwC-H2.html.

→ Waterwheel Carousel Vertical 1

Ci-dessous le code de l'Iframe qui appelle le fichier WwC-V1.html.


<iframe scrolling="no" src="images/WwC-V1.html" style="background:transparent;" width="100%" height="520px" frameborder="0"></iframe>

Ci-dessous le code du fichier WwC-V1.html.

→ Waterwheel Carousel Vertical 2

Ci-dessous le code de l'Iframe qui appelle le fichier WwC-V2.html.


<iframe scrolling="no" src="images/WwC-V2.html" style="background:transparent;" width="100%" height="520px" frameborder="0"></iframe>

Ci-dessous le code du fichier WwC-V2.html.

Utilisez sans modération les fichiers .html du zip contenant tous les fichiers : WaterwheelCarousel.zip. Veuillez, s'il vous plaît laisser les références d'origine du procédé et de mon site dans l'en-tête, merci.

Me contacter sur le forum pour toute aide ou information supplémentaire.


Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels