bundles/Alea/AreabricksBundle/Resources/views/areas/galleryfull/view.html.twig line 1

Open in your IDE?
  1. {% set pagDesk = pimcore_checkbox('pagDesk').getData() %}
  2. {% set pagMob = pimcore_checkbox('pagMob').getData() %}
  3. {% set pagColorMob = pimcore_select('pagColorMob').getData() %}
  4. {% set pagColorDesk = pimcore_select('pagColorDesk').getData() %}
  5. {% set navDesk = pimcore_checkbox('navDesk').getData() %}
  6. {% set navMob = pimcore_checkbox('navMob').getData() %}
  7. {% set navColorMob = pimcore_select('navColorMob').getData() %}
  8. {% set navColorDesk = pimcore_select('navColorDesk').getData() %}
  10. <style>
  11.   {#.swiper-button-prev,
  12.   .swiper-button-next {
  13.     color: var(--{{navColorDesk}});
  14.   }
  15.   .swiper-pagination {
  16.     color: var(--{{pagColorDesk}});
  17.   }
  18.   @media (max-width:768px){    
  19.     .swiper-button-prev,
  20.     .swiper-button-next {
  21.       color: var(--{{navColorMob}});
  22.     }
  23.     .swiper-pagination {
  24.       color: var(--{{pagColorMob}});
  25.     }
  26.   }#}
  27. </style>
  29. <div class="block-gallery">
  30.     <div class="swiper swiper-slider">
  31.         {% if editmode %}
  32.             {% for i in pimcore_block('imageBlock').iterator %}
  33.                 <div class="">
  34.                     {{ pimcore_image("image") }}
  35.                 </div>
  36.             {% endfor %}
  37.         {% else %}
  38.         <div class="swiper-wrapper mx-auto">
  39.             {% for i in pimcore_block('imageBlock').iterator %}
  40.                 <div class="swiper-slide image">
  41.                     <img src="{{ pimcore_image("image").getSrc() }}" alt="" class="w-100" />
  42.                 </div>
  43.             {% endfor %}
  44.         </div>
  45.         {% endif %}
  46.         <div class="swiper-pagination text-{{pagColorMob|default('black')}} text-md-{{pagColorDesk|default('black')}}"></div>
  47.         <div class="swiper-button-prev ps-20 text-{{navColorMob|default('black')}} text-md-{{navColorDesk|default('black')}}"></div>
  48.         <div class="swiper-button-next pe-20 text-{{navColorMob|default('black')}} text-md-{{navColorDesk|default('black')}}"></div>
  49.     </div>
  50. </div>
  51.         
  53. {% do pimcore_head_script().appendFile(swiper_js) %}    
  54. <script>
  55.   document.addEventListener("DOMContentLoaded", (event) => {
  56.     var thumbsSwiper = new Swiper('.block-gallery .swiper-slider', {
  57.         // Default parameters
  58.       slidesPerView: 1,
  59.       loop: true,
  60.       effect: 'fade',
  61.       fadeEffect: {
  62.         crossFade: true
  63.       },
  64.       autoplay: {
  65.         delay:2500,
  66.       },
  67.       speed: 1500,
  68.       pagination: {
  69.         el: '.swiper-pagination',
  70.         type: 'bullets',
  71.         enabled: {% if pagMob %}true{% else %}false{% endif %},
  72.       },
  73.       navigation: {
  74.         nextEl: '.swiper-button-next',
  75.         prevEl: '.swiper-button-prev',
  76.         enabled: {% if navMob %}true{% else %}false{% endif %},
  77.       },
  78.       // Responsive breakpoints
  79.       breakpoints: {
  80.         768: {
  81.           slidesPerView: 1,
  82.           pagination: {
  83.             enabled: {% if pagDesk %}true{% else %}false{% endif %},
  84.           },
  85.           navigation: {
  86.             enabled: {% if navDesk %}true{% else %}false{% endif %},
  87.           }
  88.         }
  89.       }
  90.     });
  91.   });
  92. </script>