templates/accueil/fr.slider.html.twig line 1

  1. {# Pour ajouter une slider il suffit de dupliquer un "contenu slide" (commentaire) et mettre dans {% set slideNum = "1" %} le numéro que l'on veut lui donner 
  2. Par défaut, l'ordre d'affichage des élément est #rightImg${newSlideNumber} --> #title${newSlideNumber} --> #subTitle${newSlideNumber} --> #leftBottomText${newSlideNumber}
  3. --> #leftBottomImgA${newSlideNumber} --> #leftBottomImgB${newSlideNumber}`) --> #leftBottomImgC${newSlideNumber}
  4. L'ordre est modifiable dans slider.js juste après le commentaire "ordre élément slide" #}
  5. <div id="slider" class="position-relative">
  6.     {# fleche direction #}
  7.     <i class="sliderArrow left fa-solid fa-circle-arrow-left"></i>
  8.     <i class="sliderArrow right fa-solid fa-circle-arrow-right"></i>
  9.     {# contenu slide 1 #}
  10.     {% set slideNum = "1" %}
  11.     <div id="slide{{ slideNum }}" class="slide active clearfix position-relative">
  12.         <div class="topLeftDiv ps-5 position-absolute">
  13.             <h1 id="title{{ slideNum }}" class="title text-secondary opacity"> Axe dynamométrique redondant</h1>
  14.             <div id="subTitle{{ slideNum }}" class="subTitle opacity"> SIL ready (EN 61508), PL ready (EN 13849-1)</div>
  15.         </div>
  16.         <a href="/fr/axes-dynamometriques/axe-dynamometrique-redondant-sil">
  17.             <img id="rightImg{{ slideNum }}" class="rightImg float-end position-relative opacity" src="/ps/img/slider/mino-5000-HOIS003025-16t-(2)--detoure-HD.jpg" alt="mino 5000 HOIS003025 16t" width="752px" height="500px"></img>
  18.         </a>
  19.         <div class="leftBottomDiv w-100 position-absolute d-inline-block ps-5 pb-5">
  20.             <div id="leftBottomText{{ slideNum }}" class="leftBottomText opacity"> Applications typiques</div>
  21.             <div class="d-flex w-100 flex-wrap justify-content-start">
  22.                 <a href="/fr/applications/limitation-de-charge-sur-engins-de-levage/axe-dynamometrique-sil-3-securite-des-systemes-de-levage-pour-machinerie-scenique-theatre" class="p-1">
  23.                     <img id="leftBottomImgA{{ slideNum }}" class="leftBottomImg leftBottomImgA img-fluid opacity" src="/ps/img/slider/4.1-axe-dynamometrique-sil-3-systemes-de-levage-pour-machinerie-scenique-theatre-01-H_FR.png" alt="axe dynamometrique sil 3 systemes de levage pour machinerie scenique theatre" width="171px" height="91px"></img>
  24.                 </a>
  25.                 <a href="/fr/applications/limitation-de-charge-sur-engins-de-levage/limiteur-de-charge-pour-ascenseur" class="p-1">
  26.                     <img id="leftBottomImgB{{ slideNum }}" class="leftBottomImg leftBottomImgB img-fluid opacity" src="/ps/img/slider/4.2-limiteur-de-charge-pour-ascenseur-01-H_FR.png" alt="limiteur de charge pour ascenseur" width="171px" height="91px"></img>
  27.                 </a>
  28.                 <a href="/fr/applications/limitation-de-charge-pour-pont-roulants/limiteur-de-charge-sur-engins-de-levage-lourds" class="p-1">
  29.                     <img id="leftBottomImgC{{ slideNum }}" class="leftBottomImg leftBottomImgC img-fluid opacity" src="/ps/img/slider/3.3-limiteur-de-charge-sur-engins-de-levage-lourds-H_FR.png" alt="limiteur de charge sur engins de levage lourds" width="171px" height="91px"></img>
  30.                 </a>
  31.             </div>
  32.         </div>
  33.     </div>
  34.     {# fin contenu slide 1 #}
  35.     {# contenu slide 2 #}
  36.     {% set slideNum = "2" %}
  37.     <div id="slide2" class="slide clearfix position-relative d-none">
  38.         <div class="topLeftDiv ps-5 position-absolute">
  39.             <h1 id="title{{ slideNum }}" class="text-secondary opacity"> Limiteur de charge (PL d) <br> SAFETY-BOY</h1>
  40.             <div id="subTitle{{ slideNum }}" class="opacity">  Certifié pour la sécurité fonctionnelle des ponts-roulants et grues <br> Niveau de performance PL d suivant EN ISO 13849-1 / « SIL 3 ready » </div>
  41.         </div>
  42.         <a href="/fr/axes-dynamometriques/axe-dynamometrique-redondant-sil">
  43.             <img id="rightImg{{ slideNum }}"class="rightImg float-end position-relative opacity" alt="Limiteur de charge SAFETY-BOY" src="/ps/img/slider/Limiteur_de_charge_SAFETY_BOY.jpg" width="752px" height="500px" style="max-width:45%"></img>
  44.         </a>
  45.         <div class="leftBottomDiv w-100 position-absolute d-inline-block ps-5 pb-5">
  46.             <div id="leftBottomText{{ slideNum }}" class="opacity"> Applications typiques</div>
  47.             <div class="d-flex w-100 flex-wrap justify-content-start">
  48.                 <a href="fr/applications/limitation-de-charge-pour-pont-roulants/limiteur-de-charge-pour-pont-roulant-avec-grand-display" class="p-1">
  49.                     <img id="leftBottomImgA{{ slideNum }}" class="leftBottomImg leftBottomImgA opacity img-fluid" src="/ps/img/slider/limiteur-de-charge-pour-pont-roulant-avec-grand-display.jpg" alt="Limiteur de charge pour pont roulant avec grand display" width="171px" height="91px"></img>
  50.                 </a>
  51.                 <a href="/fr/applications/limitation-de-charge-pour-pont-roulants/limiteur-de-charge-pour-levage-complexe" class="p-1">
  52.                     <img id="leftBottomImgB{{ slideNum }}" class="leftBottomImg leftBottomImgB opacity img-fluid" src="/ps/img/slider/limiteur-de-charge-pour-levage-complexe.jpg" alt="Limiteur de charge pour levage complexe" width="171px" height="91px"></img>
  53.                 </a>
  54.                 <a href="/fr/applications/limitation-de-charge-pour-pont-roulants/limiteur-de-charge-sur-engins-de-levage-lourds" class="p-1">
  55.                     <img id="leftBottomImgC{{ slideNum }}" class="leftBottomImg leftBottomImgC opacity img-fluid" src="/ps/img/slider/limiteur-de-charge-sur-engins-de-levage-lourds.jpg" alt="Limiteur de charge sur engins de levage lourds" width="171px" height="91px"></img>
  56.                 </a>
  57.             </div>
  58.         </div>
  59.     </div>
  60.     {# fin contenu slide 2 #}
  61. </div>