templates/front_v4/mca/blog/_blog_swiper.html.twig line 1

Open in your IDE?
  1. <!-- Hero -->
  2. <div class="position-relative">
  3.     <!-- Swiper Main Slider -->
  4.     <div class="js-swiper-blog-journal-hero swiper">
  5.         <div class="swiper-wrapper">
  6.             {% for post in pillarPages %}
  7.                 <div class="swiper-slide d-flex gradient-x-overlay-sm-dark bg-img-start"
  8.                      style="background-image: url({% if post.filename %} {{ vich_uploader_asset(post, 'imageFile') | imagine_filter('blog_post_main') }} {% endif %}); min-height: 40rem;">
  9.                     <!-- Container -->
  10.                     <div class="container d-flex align-items-center" style="min-height: 40rem;">
  11.                         <div class="w-lg-50 me-3">
  12.                             <!-- Media -->
  13.                             <div class="d-flex align-items-center mb-3">
  14.                                 <div class="flex-shrink-0">
  15.                                     <div class="avatar avatar-circle">
  16.                                         <img class="avatar-img"
  17.                                              src="{% if post.blogAuthor.filename %} {{ vich_uploader_asset(post.blogAuthor, 'imageFile') | imagine_filter('author_image_small') }} {% endif %}"
  18.                                              alt="{{ post.blogAuthor.firstname }}">
  19.                                     </div>
  20.                                 </div>
  22.                                 <div class="flex-grow-1 ms-3">
  23.                                     <a class="text-white"
  24.                                        href="{{ path('blog_author_show', {'id': post.blogAuthor.id}) }}">{{ post.blogAuthor.firstname }}</a>
  25.                                 </div>
  26.                             </div>
  27.                             <!-- End Media -->
  29.                             <div class="mb-5">
  30.                                 <h2 class="h1 text-white">{{ post.title }}</h2>
  31.                             </div>
  33.                             <a class="btn btn-primary btn-transition"
  34.                                href="{{ path('blog_post_show', {'slug': post.slug}) }}">Lire l'article <i
  35.                                         class="bi-chevron-right small ms-1"></i></a>
  36.                         </div>
  37.                     </div>
  38.                     <!-- End Container -->
  39.                 </div>
  40.             {% endfor %}
  41.         </div>
  43.         <!-- Swiper Pagination -->
  44.         <div class="js-swiper-blog-journal-hero-pagination swiper-pagination swiper-pagination-light swiper-pagination-vertical swiper-pagination-middle-y-end me-3 d-lg-none"></div>
  45.     </div>
  46.     <!-- End Swiper Main Slider -->
  48.     <!-- Swiper Thumbs Slider -->
  49.     <div class="d-none d-lg-block container translate-middle-y position-absolute top-50 start-0 end-0 zi-2">
  50.         <div class="translate-middle-y position-absolute top-50 end-0">
  51.             <div class="js-swiper-blog-journal-hero-thumbs swiper"
  52.                  style="opacity:0; max-width: 15rem;">
  53.                 <div class="swiper-wrapper">
  54.                     {% for post in pillarPages %}
  55.                         <!-- Slide -->
  56.                         <div class="swiper-slide swiper-pagination-progress swiper-pagination-progress-light pb-4">
  57.                             <p class="text-white">{{ post.title }}</p>
  59.                             <div class="swiper-pagination-progress-body">
  60.                                 <div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
  61.                             </div>
  62.                         </div>
  63.                         <!-- End Slide -->
  64.                     {% endfor %}
  65.                 </div>
  66.             </div>
  67.         </div>
  68.     </div>
  69.     <!-- End Swiper Thumbs Slider -->
  70. </div>
  71. <!-- End Hero -->