custom/plugins/BlurElysiumSlider/src/Resources/views/storefront/element/cms-element-blur-elysium-slider.html.twig line 1

Open in your IDE?
  1. {% block cms_element_blur_elysium_slider_root %}
  3.     {% set sliderOverlay = element.translated.config.sliderOverlay.value %}
  4.     {% set sliderSettingsNav = element.translated.config.sliderNavigation.value %}
  5.     {% set slideSpeed = element.translated.config.slideSpeed.value %}
  6.     {% set sliderAutoplay = element.translated.config.sliderAutoplay.value %}
  7.     {% set sliderAutoplayTimeout = element.translated.config.sliderAutoplayTimeout.value %}
  8.     {% set sliderArrowColors = element.translated.config.sliderArrowColor.value %}
  9.     {% set sliderDotColors = element.translated.config.sliderDotColor.value %}
  10.     {% set sliderDotActiveColors = element.translated.config.sliderDotActiveColor.value %}
  11.     {% set sliderAspectRatio = element.translated.config.aspectRatio.value %}
  13.     {% set sliderSettings = {
  14.         nav: sliderSettingsNav,
  15.         navContainer: '[data-base-slider-nav=true]',
  16.         controls: true,
  17.         loop: false,
  18.         rewind: true,
  19.         speed: slideSpeed,
  20.         autoplay: sliderAutoplay,
  21.         autoplayTimeout: sliderAutoplayTimeout,
  22.         autoplayHoverPause: true,
  23.         autoplayButtonOutput: false
  24.     } %}
  26.     {% block cms_element_blur_elysium_slider_css_styles %}
  28.         {% apply spaceless %}
  29.             <style>
  30.                 #elysiumSlider-{{ element.id }} .cms-element-elysium-slide {
  31.                     {% if sliderAspectRatio.landscape %}
  32.                         aspect-ratio: auto {{ sliderAspectRatio.landscape.width }} / {{ sliderAspectRatio.landscape.height }};
  33.                     {% endif %}
  34.                 }
  35.                 {% if sliderArrowColors %}
  36.                     #elysiumSlider-{{ element.id }} .cms-element-elysium-slider__control-button {
  37.                         color: {{ sliderArrowColors }};
  38.                     }                
  39.                 {% endif %}
  40.                 {% if sliderDotColors %}
  41.                     #elysiumSlider-{{ element.id }} .cms-element-elysium-slider__navigation-bullet {
  42.                         background-color: {{ sliderDotColors }};
  43.                     }                
  44.                 {% endif %}
  45.                 {% if sliderDotActiveColors %}
  46.                     #elysiumSlider-{{ element.id }} .cms-element-elysium-slider__navigation-bullet:hover,
  47.                     #elysiumSlider-{{ element.id }} .cms-element-elysium-slider__navigation-bullet.tns-nav-active {
  48.                         background-color: {{ sliderDotActiveColors }};
  49.                     }                
  50.                 {% endif %}
  51.                 {% if sliderAspectRatio.portrait %}
  52.                     @media screen and (orientation: portrait) {
  53.                         #elysiumSlider-{{ element.id }} .cms-element-elysium-slide {
  54.                             aspect-ratio: auto {{ sliderAspectRatio.portrait.width }} / {{ sliderAspectRatio.portrait.height }};
  55.                         }                        
  56.                     }
  57.                 {% endif %}
  58.                 {% block cms_element_blur_elysium_slider_css_styles_extend %}{% endblock %}
  59.             </style>
  60.         {% endapply %}
  61.     {% endblock %}
  63.     {% block cms_element_blur_elysium_slider %}
  64.         {# your could override sliderSettings variables on this block #}
  66.         <div id="elysiumSlider-{{ element.id }}" 
  67.             data-slider-settings='{{ sliderSettings|json_encode }}'
  68.             class="cms-element-elysium-slider{% if sliderSettingsNav %} has-navigation{% endif %}{% if sliderOverlay %} has-overlay{% endif %}">
  70.             {% if element.data.slideCollection is empty %}
  72.                 {% block cms_element_blur_elysium_slider_empty_state %}
  73.                     <!-- no slide collection here -->
  74.                 {% endblock %}
  75.             {% else %}
  77.                 {% block cms_element_blur_elysium_slider_container %}
  78.                     <div class="cms-element-elysium-slider__slide-container">
  80.                         {% for slide in element.data.slideCollection %}
  81.                             <div class="cms-element-elysium-slide__wrapper">
  83.                                 {% block cms_element_blur_elysium_slide_include %}
  84.                                     {% set slideTemplate = 'slide' %}
  86.                                     {% if slide.slideSettings.customTemplateFile %}
  87.                                         {% set slideTemplate = 'custom/' ~ slide.slideSettings.customTemplateFile %}
  88.                                     {% endif %}
  90.                                     {% sw_include '@Storefront/storefront/component/blur-elysium-slide/' ~ slideTemplate ~'.html.twig' ignore missing with {
  91.                                         slide: slide
  92.                                     } only %}
  93.                                 {% endblock %}
  94.                             </div>
  95.                         {% endfor %}
  96.                     </div>
  97.                 {% endblock %}
  98.             
  99.                 {% block cms_element_blur_elysium_slider_controls %}
  100.                     <div class="cms-element-elysium-slider__controls" 
  101.                         data-base-slider-controls="true">
  102.                         
  103.                         {% block cms_element_blur_elysium_slider_controls_prev %}
  104.                             <button type="button" 
  105.                                 class="cms-element-elysium-slider__control-button control-prev"
  106.                                 aria-label="{{ 'blurElysiumSlides.sliderControls.prev' | trans }}">
  107.                                 {% block cms_element_blur_elysium_slider_controls_prev_icon %}
  108.                                     {% sw_icon 'arrow-head-left' %}
  109.                                 {% endblock %}
  110.                             </button>
  111.                         {% endblock %}
  112.                         
  113.                         {% block cms_element_blur_elysium_slider_controls_next %}
  114.                             <button type="button" 
  115.                                 class="cms-element-elysium-slider__control-button control-next"
  116.                                 aria-label="{{ 'blurElysiumSlides.sliderControls.next' | trans }}">
  117.                                 {% block cms_element_blur_elysium_slider_controls_next_icon %}
  118.                                     {% sw_icon 'arrow-head-right' %}
  119.                                 {% endblock %}
  120.                             </button>
  121.                         {% endblock %}
  122.                     </div>
  123.                 {% endblock %}
  125.                 {% block cms_element_blur_elysium_slider_navigation %}
  126.                 
  127.                     {% if sliderSettingsNav %}
  128.                         <div class="cms-element-elysium-slider__navigation" 
  129.                             data-base-slider-nav="true">
  130.                             
  131.                             {% for slide in element.data.slideCollection %}
  132.                                 <div class="cms-element-elysium-slider__navigation-bullet"></div>
  133.                             {% endfor %}
  134.                         </div>                    
  135.                     {% endif %}
  136.                 {% endblock %}
  137.             {% endif %}
  139.         </div>  
  140.     {% endblock %}  
  141. {% endblock %}