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.

Le fait de les appeler dans des Iframes présente aussi l'avantage que les Carousels s'afficheront correctement y compris sur Mobiles

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 le même exemple que celui de la page précédente, les réglages sont donc les mêmes, hormis l'orientation verticale pour Mobile qui n'est pas nécessaire.

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.


Index |Info | Imprimer | Permalien
Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels