templates/areas/carousel/view.html.twig line 1

Open in your IDE?
  1. {% set randomId = 'swiper_' ~ random() %}
  3. {% if editmode %}
  4.     <div class="container">
  5.         {% for i in pimcore_block('carouselblock').iterator %}
  6.             <div style="background: #fff; padding: 20px;">
  7.                 <p>Link:<br>{{ pimcore_link('link', {
  8.                         'required': 'linkonly'
  9.                     }) }}</p>
  10.                 <p>Kép (1920x1200px):<br>{{ pimcore_image('image') }}</p>
  11.                 <h2>{{ pimcore_input('subline', {'placeholder': 'Szöveg 1. sor'}) }}</h2>
  12.                 <h1>{{ pimcore_textarea('headerline', {'placeholder': 'Szöveg 2. sor'}) }}</h1>
  13.                 <hr>
  14.             </div>
  15.         {% endfor %}
  16.     </div>
  17. {% else %}
  18.     <section id="homepage-slider" class="position-relative">
  19.         <div class="container">
  20.             <div class="swiper-container homepage-slider {{ randomId }}">
  21.                 <div class="swiper-wrapper">
  22.                     {% for i in pimcore_block('carouselblock').iterator %}
  23.                         <a href="{{ pimcore_link('link').getHref() }}" class="swiper-slide bg"
  24.                            style="background: url('{{ pimcore_image('image').getSrc() }}')">
  25.                             <div class="content">
  26.                                 <div>
  27.                                     {% if not pimcore_input('subline').isEmpty() %}
  28.                                         <p>{{ pimcore_input('subline').getData() }}</p>
  29.                                     {% endif %}
  30.                                     {% if not pimcore_textarea('headerline').isEmpty() %}
  31.                                         <h2>{{ pimcore_textarea('headerline').getData() | nl2br }}</h2>
  32.                                     {% endif %}
  33.                                 </div>
  34.                             </div>
  35.                         </a>
  36.                     {% endfor %}
  37.                 </div>
  38.                 <div class="swiper-pagination"></div>
  39.                 <div class="swiper-button-prev"></div>
  40.                 <div class="swiper-button-next"></div>
  41.             </div>
  42.         </div>
  43.     </section>
  45.     {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js') %}
  47.     {% do pimcore_head_script().captureStart('APPEND') %}
  48.         const swiper_{{ randomId }} = new Swiper('.{{ randomId }}', {
  49.         // Optional parameters
  50.         direction: 'horizontal',
  51.         loop: true,
  52.         slidesPerView: 1,
  53.         autoplay: {
  54.             delay: 3000,
  55.         },
  57.         // If we need pagination
  58.         pagination: {
  59.         el: '.{{ randomId }} .swiper-pagination',
  60.         },
  62.         // Navigation arrows
  63.         navigation: {
  64.         nextEl: '.{{ randomId }} .swiper-button-next',
  65.         prevEl: '.{{ randomId }} .swiper-button-prev',
  66.         },
  67.         });
  68.     {% do pimcore_head_script().captureEnd() %}
  70.     {% block css %}
  71.         {% do pimcore_head_link().appendStylesheet('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css') %}
  72.     {% endblock %}
  73. {% endif %}