<?php
    $bgImageContent = getContent('bg_image.content', true);
?>

<section class="breadcrumb bg-img"
    data-background-image="<?php echo e(frontendImage('bg_image', @$bgImageContent->data_values->image, '1920x140')); ?>">
    <div class="container">
        <div class="category-slider">
            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="category-slider__slide">
                    <a class="category-item"
                        href="<?php echo e(route('category.wise.product', [slug($category->name), $category->id])); ?>">
                        <img class="category-item__thumb"
                            src="<?php echo e(getImage(getFilePath('category') . '/' . $category->image, getFileSize('category'))); ?>"
                            alt="<?php echo e($category->name); ?>" />
                        <span class="category-item__name"><?php echo e(__($category->name)); ?></span>
                    </a>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>


<?php if(!app()->offsetExists('slick_script')): ?>
    <?php $__env->startPush('style-lib'); ?>
        <link href="<?php echo e(asset(activeTemplate(true) . 'css/slick.css')); ?>" rel="stylesheet">
    <?php $__env->stopPush(); ?>

    <?php $__env->startPush('script-lib'); ?>
        <script src="<?php echo e(asset(activeTemplate(true) . 'js/slick.min.js')); ?>"></script>
    <?php $__env->stopPush(); ?>

    <?php app()->offsetSet('slick_script',true) ?>
<?php endif; ?>

<?php $__env->startPush('script'); ?>
    <script>
        (function($) {
            "use strict";

            $(".category-slider").slick({
                slidesToShow: 6,
                slidesToScroll: 2,
                speed: 1500,
                dots: false,
                arrows: true,
                pauseOnHover: true,
                prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-angle-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="fas fa-angle-right"></i></button>',
                responsive: [{
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 5,
                        },
                    },
                    {
                        breakpoint: 992,
                        settings: {
                            slidesToShow: 4,
                        },
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 3,
                        },
                    },
                    {
                        breakpoint: 425,
                        settings: {
                            slidesToShow: 2,
                        },
                    },
                ],
            });

        })(jQuery);
    </script>
<?php $__env->stopPush(); ?>
<?php /**PATH /home/u710135641/domains/compulancer.com/public_html/core/resources/views/templates/basic/partials/category_slider.blade.php ENDPATH**/ ?>