templates/default/snippet/carousel.twig line 1

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