Dans ce tutoriel sur Foundation nous allons apprendre comment créer un carrosuel.
Code source :
Fichier index.html :
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Apprendre DEV</title> <link rel="stylesheet" href="css/foundation.css"> <link rel="stylesheet" href="css/app.css"> </head> <body > <div class="off-canvas-wrapper"> <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> <div class="title-bar" data-responsive-toggle="menu-principal-horizontal" data-hide="medium"> <div class="title-bar-left"> <button class="menu-icon" type="button" data-open="menu-principal-responsive"></button> <span class="title-bar-title">Apprendre DEV</span> </div> </div> <nav class="off-canvas position-left" id="menu-principal-responsive" data-off-canvas > <!-- Close button --> <button class="close-button" aria-label="Close menu" type="button" data-close> <span aria-hidden="true">×</span> </button> <ul class="dropdown vertical menu" data-responsive-menu="accordion"> <li class="active"> <a href="index.html">Accueil</a> </li> <li> <a href="#" >Language </a> <ul class="menu vertical"> <li><a href="#">PHP</a></li> <li><a href="java.html">JAVA</a></li> <li><a href="#">C</a></li> <li><a href="#">C++</a></li> <li><a href="#">C#</a></li> </ul> </li> <li> <a href="#" >Framework PHP</a> <ul class="menu vertical"> <li><a href="#">Symfony</a></li> <li><a href="#">Laravel</a></li> <li><a href="#">Cakephp</a></li> <li><a href="#">Yii</a></li> </ul> </li> <li> <a href="#" >Framework JS </a> <ul class="menu vertical"> <li><a href="#">Backbone.js</a></li> <li><a href="#">AngularJS</a></li> <li><a href="#">React</a></li> <li><a href="#">Meteor</a></li> </ul> </li> <li > <a href="#" >CMS </a> <ul class="menu vertical"> <li><a href="#">Drupal</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Joomla</a></li> <li><a href="#">Prestashop</a></li> </ul> </li> <li> <a href="#" >ERP</a> <ul class="menu vertical"> <li><a href="#">Odoo</a></li> <li><a href="#">Dolibarr</a></li> </ul> </li> <li> <a href="#" >Logiciel</a> <ul class="menu vertical"> <li><a href="#">Adobe Premier</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">InDesign</a></li> <li><a href="#">Gimp</a></li> <li><a href="#">Sublimtext</a></li> <li><a href="#">Notepad++</a></li> </ul> </li> </ul> </nav> <!-- ************************** --> <!-- Barre de menu Horizontal --> <!-- ************************** --> <nav class="top-bar" id="menu-principal-horizontal"> <div class="row column"> <ul class="dropdown menu" data-dropdown-menu> <li class="menu-text">Apprendre DEV</li> <li class="active"> <a href="index.html">Accueil</a> </li> <li> <a href="#" >Language </a> <ul class="menu vertical"> <li><a href="#">PHP</a></li> <li><a href="java.html">JAVA</a></li> <li><a href="#">C</a></li> <li><a href="#">C++</a></li> <li><a href="#">C#</a></li> </ul> </li> <li> <a href="#" >Framework PHP</a> <ul class="menu vertical"> <li><a href="#">Symfony</a></li> <li><a href="#">Laravel</a></li> <li><a href="#">Cakephp</a></li> <li><a href="#">Yii</a></li> </ul> </li> <li> <a href="#" >Framework JS </a> <ul class="menu vertical"> <li><a href="#">Backbone.js</a></li> <li><a href="#">AngularJS</a></li> <li><a href="#">React</a></li> <li><a href="#">Meteor</a></li> </ul> </li> <li > <a href="#" >CMS </a> <ul class="menu vertical"> <li><a href="#">Drupal</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Joomla</a></li> <li><a href="#">Prestashop</a></li> </ul> </li> <li> <a href="#" >ERP</a> <ul class="menu vertical"> <li><a href="#">Odoo</a></li> <li><a href="#">Dolibarr</a></li> </ul> </li> <li> <a href="#" >Logiciel</a> <ul class="menu vertical"> <li><a href="#">Adobe Premier</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">InDesign</a></li> <li><a href="#">Gimp</a></li> <li><a href="#">Sublimtext</a></li> <li><a href="#">Notepad++</a></li> </ul> </li> </ul> </div> </nav> <!-- ************************** --> <!-- Contenu page web --> <!-- ************************** --> <div class="off-canvas-content" data-off-canvas-content> <!-- Page content --> <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-timer-delay="3000" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;"> <ul class="orbit-container"> <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button> <li class="is-active orbit-slide"> <img class="orbit-image" src="img/drupal-8_carousel.png" alt="Space"> <figcaption class="orbit-caption">Apprendre Drupal8 de A à Z</figcaption> </li> <li class="orbit-slide"> <img class="orbit-image" src="img/gimp_carousel.png" alt="Space"> <figcaption class="orbit-caption">Apprendre le Design avec Gimp</figcaption> </li> <li class="orbit-slide"> <img class="orbit-image" src="img/prestashop_carousel.png" alt="Space"> <figcaption class="orbit-caption">Le Cms e-commercxe</figcaption> </li> <li class="orbit-slide"> <img class="orbit-image" src="img/laravel_carousel.png" alt="Space"> <figcaption class="orbit-caption">Le Framework PHP</figcaption> </li> </ul> <nav class="orbit-bullets"> <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button> <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button> <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button> <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button> </nav> </div> </div> </div> </div> <script src="js/vendor/jquery.js"></script> <script src="js/vendor/foundation.js"></script> <script src="js/app.js"></script> </body> </html>
Fichier app.css :
/*Ammélioration off-canvas*/ #menu-principal-responsive{ background: #000000; color: #FFFFFF; } #menu-principal-responsive .menu .active > a{ background: #000000; color: #2199e8; } #menu-principal-responsive li > a{ color: #FFFFFF; } #menu-principal-responsive .is-accordion-submenu-parent > a::after { border-color: #FFFFFF transparent transparent; } .off-canvas.position-left { height: 100%; }