templates/layouts/slider.html.twig line 1

Open in your IDE?
  2. <!--==================================================-->
  3. <!-- Start Hero Area -->
  4. <!--==================================================-->
  5. <section class="hero-slider hero-style">
  6.     <div class="swiper-container">
  7.         <div class="swiper-wrapper">
  8.             {% for header in headers %}
  9.                 <div class="swiper-slide">
  10.                     <div class="slide-inner slide-bg-image" style="background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.54), rgba(30, 28, 29, 0.69)), url('{{ asset('uploads/header/' ~ header.bannerImg) }}');">
  11.                         <div class="container">
  12.                             <div class="row align-items-center">
  13.                                 <div class="col-lg-12">
  14.                                     <div class="hero-content" data-swiper-parallax="100">
  15.                                         <h1 style="font-size: 70px" class="animated fadeInUp">{{ header.title }}</h1>
  16.                                         <h1 style="font-size: 70px" class="animated fadeInUp delay-1">{{ header.idname }}</h1>
  17.                                         <p class="hero-desc animated fadeInUp delay-2">{{ header.subtitle | raw }}</p>
  18.                                     </div>
  19.                                 </div>
  20.                             </div>
  21.                         </div>
  22.                     </div>
  23.                 </div>
  24.             {% endfor %}
  25.         </div>
  26.         <!-- end swiper-wrapper -->
  27.         <!-- swipper controls -->
  28.         <div class="swiper-button-next"></div>
  29.         <div class="swiper-button-prev"></div>
  30.     </div>
  31. </section>
  33. <!--==================================================-->
  34. <!-- Start Hero Area -->
  35. <!--==================================================-->
  37. <style>
  38.     @keyframes fadeInUp {
  39.         0% {
  40.             opacity: 0;
  41.             transform: translateY(20px);
  42.         }
  43.         100% {
  44.             opacity: 1;
  45.             transform: translateY(0);
  46.         }
  47.     }
  49.     .animated {
  50.         animation-duration: 1s;
  51.         animation-fill-mode: both;
  52.     }
  54.     .fadeInUp {
  55.         animation-name: fadeInUp;
  56.     }
  58.     .delay-1 {
  59.         animation-delay: 0.2s;
  60.     }
  62.     .delay-2 {
  63.         animation-delay: 0.4s;
  64.     }
  66. </style>