templates/partials/_slider_reference.html.twig line 1

Open in your IDE?
  1.     <div class="container-fluid text-center justify-content-center p-3 mt-5">
  2.         <div class="row d-flex justify-content-center gap-3">
  3.             <div class="row justify-content-center">
  4.                 <div class="col">
  5.                     <div class="row justify-content-center p-3">
  6.                         <div id="Références" class="col-sm-12 col-md-12 col-lg-6 noEffect">
  7.                             <h2>Références</h2>
  8.                         </div>
  9.                         <svg class="swiper-button-prev-index noEffect" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
  10.                         <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
  11.                         </svg>
  12.                         <svg class="swiper-button-next-index noEffect" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
  13.                         <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
  14.                         </svg>
  15.                     </div>
  16.                 </div>
  17.             </div>
  18.         </div>
  19.     </div>
  21.     <div class="container-fluid text-center d-flex justify-content-center align-items-center">
  22.         <div class="col-md-10 swiper">
  23.             <div class="swiper-wrapper">
  24.                 {% for reference in references %}
  25.                     <div class="card swiper-slide align-content-between background-color-1">
  26.                         <div class="div px-5 pt-3 pb-3">
  27.                             <img src="{{ asset('/media/fullsize/' ~ reference.image.file)| imagine_filter('slider') }}" class="card-img-top imgborder" alt="{{ reference.image.alt }}" title="{{ reference.image.title }}">
  28.                         </div>
  29.                         <div class="card-body d-flex align-items-center justify-content-center px-2 noEffect background-color-1">
  30.                             <div class="row noEffect">
  31.                                 <h3>{{ reference.title }}</h3>
  32.                             </div>
  33.                         </div>
  34.                         <div class="card-footer pb-4 cardheight1 background-color-1">
  35.                             <p class="p-1">{{ reference.text }}</p>
  36.                         </div>
  37.                         <div class="p-5">
  38.                             <a href="{{ reference.link }}" target="_blank" class="btn3">{{ reference.button }}</a>
  39.                         </div>
  40.                     </div>
  41.                 {% endfor %}
  42.             </div>
  43.         </div>
  44.     </div>
  46. <script defer>
  47.       //creation du slide   
  48.      var swiper = new Swiper(".swiper", {
  49.         autoplay:true,
  50.         grabCursor: true,
  51.         direction: 'horizontal',
  52.         slidesPerView: 3,
  53.         spaceBetween: 10,
  54.         loop:true,
  55.         centeredSlides:false,
  56.         
  57.         navigation: {
  58.         nextEl: '.swiper-button-next-index',
  59.         prevEl: '.swiper-button-prev-index',
  60.         },
  61.         // And if we need scrollbar
  62.         //scrollbar: {
  63.             //el: '.swiper-scrollbar',
  64.             //draggable:true,
  65.         //},
  66.         //mousewheel:{
  67.             //enabled:true,
  68.             //},
  69.         
  70.         // using "ratio" endpoints
  71.         breakpoints: {
  72.             '100': {
  73.                 slidesPerView: 1,
  74.                 spaceBetween: 10,
  75.                 }, 
  76.             '320': {
  77.                 slidesPerView: 1,
  78.                 spaceBetween: 10,
  79.                 }, 
  80.             '540': {
  81.                 slidesPerView: 2,
  82.                 spaceBetween: 10,
  83.                 },   
  84.             '800': {
  85.             slidesPerView: 3,
  86.             spaceBetween: 10,
  87.             },
  88.         }
  89.         });
  90.     </script>
  92.