<div class="container box">
	<div class="row">
		<div class="category-featured box mt-50">
			<div class="page-title toggled"><h3>{{ heading_title }}</h3></div>
			<div class="category-box">
				<div class="category-feature-list">
				{% set categoryForSlider = 1 %}
				{% set categoryCount = categories|length %}
					<div id="category-carousel" class="box-category {% if categoryCount > categoryForSlider %} category-carousel {% endif %} clearfix" data-items="3">
					{% set temp2 = 0 %}	
					{% for category in categories %}					
					{% if categoryCount > categoryForSlider %}
					{% set class = 'col-xs-12' %}
					{% else %}
					{% set class = 'col-lg-3 col-md-4 col-sm-4 col-xs-6' %}
					{% endif %}
					
					{% if categoryCount > 1 and (temp2 % 2 == 0) %}
					<div class="product-content">
					{% endif %}
					<div class="category-layout {{class}}">					
						<div class="category-thumb clearfix">
							<div class="images-hover image">
								<a href="{{ category.href }}">
									<img src="{{ category.thumb }}" alt="{{ category.name }}" title="{{ category.name }}" class="img-responsive" />
								</a>
							</div>
							<div class="caption">
								<div class="cat-title">
									<h4>
										<span>{{ category.name }}</span>
									</h4>
									<a href="{{ category.href }}" class="category-view">{{ text_view }}</a>
								</div>
						  	</div>
						</div>
					</div>
					{% if categoryCount > 1 and (temp2 % 2 != 0) %}
					</div>
					{% endif %}
					{% set temp2 = (temp2 + 1) %}
					{% if categoryCount > 1 and (temp2 % 2 != 0) %}
					{% endif %}
					{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

 <script><!--
// set slider
const dirCategory = $('html').attr('dir');

$('.category-carousel').each(function () {
	if ($(this).closest('#column-left').length == 0 && $(this).closest('#column-right').length == 0) {
		$(this).addClass('owl-carousel owl-theme');
			const items = $(this).data('items') || 3;
			const sliderOptions = {
				loop: false,
				rewind: false,
				nav: true,
				navText: ['<i class="fa fa-angle-left">','<i class="fa fa-angle-right">'],
				dots: false,
				items: items,
				autoplay: false,
				autoplayTimeout: 4000,
				responsiveRefreshRate: 200,
				responsive: {
				0: { items: 1 },
				300: { items: 2 },
				320: { items: 3 },
				481: { items: 3 },
				1200: { items: items }
			}
		};
		if (dirCategory == 'rtl') sliderOptions['rtl'] = true;
		$(this).owlCarousel(sliderOptions);
	}
});
//--></script>