{% set services = service_page.pagedata['Services'] %}

{% set serviceSlider = "{
        destroy: true,
        pagination: false,
        rewind: false,
        arrows: false,
        speed: 1500,
        perMove: 1,
        perPage: 3,
        breakpoints: {
            900: {
                perPage: 1,
                pagination: true,
                destroy: false
            }
        }
}"
%}

{% if services[0]['Service Name']['value'] is not empty or services[0]['Service Image']['value'] is not empty or services[0]['Service Description']['value'] is not empty %}

    <div class="serviceListOuterWrap">
    
        <mtc-slider
                class="serviceList splideWhiteButtons"
                :options="{{ serviceSlider }}"
        >
     
            {% for service in services %}
    
    
                <mtc-slide class="serviceList__item">
                    
                    <div class="serviceList__inner">
            
                        <div class="serviceList__imageWrap">
            
                            {% if service['Service Image']['value'] is not empty %}
                                <img
                                        src="{{ settings.STATIC_URL }}/{{ image_folders['cms_images']['services_icons']['path'] }}/{{ service['Service Image']['value']  }}"
                                        loading="lazy"
                                        alt="{{ service['Service Name']['value'] }}"
                                        width="140"
                                        height="140"
                                        class="serviceList__image"
                                />
                            {% endif %}
            
                        </div> <!-- .imageWrap -->
            
                        <div class="serviceList__info">
            
                            <h2 class="serviceList__title">
                                
                                <span class="serviceTitleText">
                                    {{ service['Service Name']['value'] }}
                                </span>
                                
                            </h2>
            
                            <div class="serviceList__description">
                                {{ service['Service Description']['value']|raw }}
                            </div> <!-- .serviceList__description -->
                           
            
                        </div><!-- .serviceList__info -->
            
                    </div> <!-- .serviceList__inner -->
                 
                </mtc-slide>
        
            {% endfor %}
            
        </mtc-slider>
    
    </div> <!-- .serviceListOuterWrap -->

{% endif %}
