<div class="mblog mt-20">
	<div class="section container">
		<div class="box-content">
		{% if heading_title %}
			<div class="page-title section"><h3>{{ heading_title }}</h3></div>
		{% endif %}
		{% if html %}
			{{ html }}
		{% endif %}
			<div class="row">
			<div class="block_box">
			{% set articleForSlider = 1 %}
			{% set articleCount = articles|length %}
				<div id="blogcarousel" class="blogs-block {% if articleCount > articleForSlider %} blog-carousel {% endif %} clearfix" data-items="2">
					{% if articleCount > articleForSlider %}
						{% set class = ' col-xs-12' %}
					{% else %}
						{% set class = ' col-lg-4 col-md-6 col-sm-6 col-xs-12' %}
					{% endif %}
					{% for article in articles %}
						<div  class="product-layout {{class}}">
							<div class="item">
								<div class="product-block blog-block row">
									{% if article.image %}
									<div class="blog-info col-xs-6">									
										<div class="image">
											<a href="{{ article.href }}"><img src="{{ article.image }}" alt="{{ article.title }}" title="{{article.name }}" class="img-responsive" /></a>
											<div class="zoom-post">
												<a class="hover-zoom" href="{{ article.thumb }}" data-lightbox="example-set" title="{{article.name }}"></a>
												<a class="hover-post" href="{{ article.href }}"></a>
											</div>										
										</div>							
									</div>
									{% endif %}
									<div class="caption blog-description col-xs-6">										
										<div class="link_info">
											<h4><a href="{{ article.href }}">{{ article.name }}</a></h4>
											<div class="blog-text">
												<span>{{ article.preview }}</span>									
											</div>
											<a class="blog-read btn" onclick="location.href = ('{{ article.href }}');"  title="{{ text_more }}">{{ text_more }}</a>
											<div class="blog-inner">
												<div class="blog-date">				
													{% if article.date %}	
													<i class="fa fa-calendar-o"></i>
													<span class="block-date">{{ article.date }}</span>
													{% endif %}
												</div>

												<span class="blog-comment"><i class="fa fa-comments-o"></i>{{ article.total_comments }} {{ text_comment }}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
			</div>
		</div>
	</div>
</div>

 <script><!--
// set slider
$(document).ready(function() {
	setBlogCarousel();
});
function setBlogCarousel() {
	const direc = $('html').attr('dir');

	$('.blog-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') || 2;
				const sliderOptions = {
					loop: false,
					nav: true,
					navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
					dots: false,
					items: items,
					responsiveRefreshRate: 200,
					responsive: {
					0: { items: 1 },
					992: { items: 1 },
					1200: { items: items }
				}
			};
			if (direc == 'rtl') sliderOptions['rtl'] = true;
			$(this).owlCarousel(sliderOptions);
		}
	});
}


//--></script>