<section class="std-section services">
<div class="container">
<div class="services__heading">
<h2 class="h3">{{ title }}</h2>
<div class="services__controls">
<button class="arrow arrow-prev">
<svg>
<use href="/assets/front/img/icons/control-arrow.svg#arrow" xlink:href="/assets/front/img/icons/control-arrow.svg#arrow"></use>
</svg>
</button>
<button class="arrow arrow-next">
<svg>
<use href="/assets/front/img/icons/control-arrow.svg#arrow" xlink:href="/assets/front/img/icons/control-arrow.svg#arrow"></use>
</svg>
</button>
</div>
</div>
<div class="services__wrapper">
<div class="swiper-wrapper">
{% if services is defined and services|length > 0 %}
{% for service in services %}
<a class="services__item swiper-slide" href="{{ service.link ? service.link : 'javascript:void(0);' }}">
{% if service.image %}
<img src="{{ asset('assets/front/img/empty.svg') }}" data-src="{{ service.image }}" alt="{{ service.title }}">
{% endif %}
<span style="color: {{ service.color_title }};">{{ service.title }}</span>
</a>
{% endfor %}
{% endif %}
</div>
</div>
</div>
<script data-defer=".services">
function requireOnDefer() {
require(['assets/front/js/application/services']);
window.removeEventListener('.services', requireOnDefer);
}
window.addEventListener('.services', requireOnDefer);
require([
'css!assets/front/css/application/services',
'css!assets/front/css/vendor/swiper',
'css!assets/front/css/vendor/swiper.navigation',
]);
</script>
</section>