templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil{% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  7.     <link rel="stylesheet" href="{{ asset('assets/front/swiper.css') }}" />
  8.     <link rel="stylesheet" href="{{ asset('assets/front/accueil.css') }}" />    
  9. {% endblock %}
  11. {% block body %}
  13.     {% include 'home/slider.html.twig' %}
  14.     {% include 'home/cabinet.html.twig' %}
  15.     {% include 'home/categories.html.twig' %}
  16.     {# {% include 'home/protocoles.html.twig' %} #}
  17.     {% include 'home/materiel.html.twig' %}
  18.     {% include 'home/news.html.twig' %}    
  19.    
  20. {% endblock %}
  22.  {% block javascripts %} 
  24.     <!-- Swiper JS -->
  25.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  27.     <!-- Initialize Swiper du slider -->
  28.     <script>
  29.         var swiper = new Swiper(".mySwiper", {
  30.         speed: 600,
  31.         parallax: true,
  32.         autoplay: {
  33.             delay: 2500,
  34.             disableOnInteraction: false,
  35.         },
  36.         pagination: {
  37.             el: ".swiper-pagination",
  38.             clickable: true,
  39.         },
  40.         navigation: {
  41.             nextEl: ".swiper-button-next",
  42.             prevEl: ".swiper-button-prev",
  43.         },
  44.         });
  45.     </script>
  47.     <!-- Initialize Swiper des protocoles -->
  48.     <script>
  49.       var swiper = new Swiper('.swiper', {
  50.         slidesPerView: 6,
  51.         spaceBetween: 10,
  52.         direction: 'horizontal',
  53.         navigation: {
  54.           nextEl: '.swiper-button-next',
  55.           prevEl: '.swiper-button-prev',
  56.         },
  57.         breakpoints: {
  58.            1300: {
  59.             slidesPerView: 6,
  60.             spaceBetween: 10,
  61.           },
  62.           1024: {
  63.             slidesPerView: 5,
  64.           },
  65.            768: {
  66.             slidesPerView: 4,
  67.           },
  68.           640: {
  69.             slidesPerView: 3,
  70.           },
  71.           480: {
  72.             slidesPerView: 2,
  73.             spaceBetween: 20,
  74.           },
  75.           100: {
  76.             slidesPerView: 1,
  77.             spaceBetween: 20, 
  78.           }, 
  79.         },
  80.       });
  82.       /* function getDirection() {
  83.         var windowWidth = window.innerWidth;
  84.         var direction = window.innerWidth <= 760 ? 'vertical' : 'horizontal';
  86.         return direction;
  87.       } */
  88.     </script>
  90.  {% endblock %}