<div class="special-categories-module">
    <div class="block-title"><h3>{{ title }}</h3></div>
    <div class="pt-content">
        {% if use_slider %}
            <div class="swiper-viewport">
                <div class="featured-categories-content swiper-container">
                    <div class="swiper-wrapper">
                        {% for category in categories %}
                            <div class="swiper-slide ">
								<div class="category-content">
									{% if use_second_img %}
										<a href="{{ category.href }}"><img src="{{ category.secondary_image }}" alt="{{ category.name }}" /></a>
									{% endif %}
									<h4 class="name"><a href="{{ category.href }}">{{ category.name }}</a></h4>
									{% if show_cate_des and category.description %}
										<p class="category-description">{{ category.description }}</p>
									{% endif %}
									{% if show_child %}
										{% if category.children %}
											{% set child_count = 0 %}
											<ul class="child-featured-categories">
												{% for childcate in category.children %}
													{% if child_count < child_number %}
														<li><a href="{{ childcate.href }}">{{ childcate.name }}</a></li>
													{% endif %}
													{% set child_count = child_count + 1 %}
												{% endfor %}
											</ul>
										{% endif %}
									{% endif %}
								</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                {% if slide_settings.shownav %}
                    <div class="swiper-pagination fcategory-pagination"></div>
                {% endif %}

                {% if slide_settings.shownextback %}
                    <div class="swiper-pager">
                        <div class="swiper-button-next special-categories-button-next"></div>
                        <div class="swiper-button-prev special-categories-button-prev"></div>
                    </div>
                {% endif %}
            </div>

            <script>
                $(document).ready(function() {
                    $(".featured-categories-content").swiper({
                        spaceBetween: 0,
                        {% if slide_settings.shownav %}
                        pagination: '.fcategory-pagination',
                        paginationClickable: true,
                        {% endif %}
                        {% if slide_settings.shownextback %}
                        nextButton: '.special-categories-button-next',
                        prevButton: '.special-categories-button-prev',
                        {% endif %}
                        speed: {% if slide_settings.speed %} {{ slide_settings.speed }} {% else %} 300 {% endif %},
                        slidesPerView: {{ slide_settings.items }},
                        slidesPerColumn: {{ slide_settings.rows }},
                        autoplay: {% if slide_settings.autoplay %} 3000 {% else %} false {% endif %},
                        loop: false,
						// Responsive breakpoints
							breakpoints: {
								479: {
								  slidesPerView: 2
								},
								767: {
								  slidesPerView: 2
								},
								991: {
								  slidesPerView: 3
								  
								},
								1199: {
								  slidesPerView: 4
								  
								}
							}
                    });
                });
            </script>
        {% else %}
            <div class="featured-categories-content">
				<div class="row">
					{% for category in categories %}
						<div class="col-lg-3 col-sm-4 col-xs-6" style="margin-top: 3rem;">
							<div class="category-content">
								{% if use_second_img %}
									<img src="{{ category.secondary_image }}" alt="{{ category.name }}" />
								{% endif %}
								<h4 class="name"><a href="{{ category.href }}">{{ category.name }}</a></h4>
								{% if show_cate_des and category.description %}
									<p class="category-description">{{ category.description }}</p>
								{% endif %}
								{% if show_child %}
									{% if category.children %}
										{% set child_count = 0 %}
										<ul class="child-featured-categories">
											{% for childcate in category.children %}
												{% if child_count < child_number %}
													<li><a href="{{ childcate.href }}">{{ childcate.name }}</a></li>
												{% endif %}
												{% set child_count = child_count + 1 %}
											{% endfor %}
										</ul>
									{% endif %}
								{% endif %}
							</div>
						</div>
					{% endfor %}
				</div>
            </div>
        {% endif %}
    </div>
</div>