<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<style>
    section.heroCarousel-container.mobile {
     display: none;
    }
    @media (max-width:551px){
        section.heroCarousel-container{
            display: none;
        }
        section.heroCarousel-container.mobile {
            display: block;
        }
        section.heroCarousel-container.mobile .slick-slide {
            display: flex !important;
            justify-content: center;
            position: relative;
        }
        .mobile-carousal-btns {
            position: absolute;
            top: 65%;
            margin: 0 auto;
            width: auto;
        }
        section.heroCarousel-container.mobile .slick-slide img {
            display: block;
            width: 100%;
            /*height: 380px;*/
        }
        /*.cstm-pos{*/
        /*    position: absolute;*/
        /*    background: none !important;*/
        /*    margin-top: 41%;*/
        /*    text-align: center;*/
        /*}*/
        .cstm-pos {
            position: absolute;
            background: none !important;
            text-align: center;
            top: 50%;
        }
        .heroCarousel-content{
            background-color: transparent;
        }
        .carousal-container-mbl{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>


{{inject 'hasMainCarousel' true}}
<section class="heroCarousel-container desktop {{#if theme_settings.carousel_banners}} heroCarousel-container--hasBanners{{/if}}">
    <div class="heroCarousel"
        data-slick='{
            "dots": true,
            "mobileFirst": true,
            "slidesToShow": 1,
            "slidesToScroll": 1,
            "autoplay": true,
            "autoplaySpeed": {{carousel.swap_frequency}},
            "lazyLoad": "anticipated"
        }'
        {{#if theme_settings.carousel_video_mute}} data-youtube-mute{{/if}}>
        {{#each carousel.slides}}
        <div class="heroCarousel-slide {{#if ../theme_settings.homepage_carousel_style '==' 'stretch'}}heroCarousel-slide--stretch{{/if}} heroCarousel-slide--{{@index}}{{#if @first}} heroCarousel-slide--first{{/if}}">
            <div class="heroCarousel-image-wrapper{{#and image_height image_width}} heroCarousel-image-wrapper--sized{{/and}}">
                <a href="{{url}}">
                    {{#if @index '==' 0}}
                        {{#if (merge this video=../../theme_settings.carousel_vid0)}}{{/if}}
                    {{/if}}
                    {{#if @index '==' 1}}
                        {{#if (merge this video=../../theme_settings.carousel_vid1)}}{{/if}}
                    {{/if}}
                    {{#if @index '==' 2}}
                        {{#if (merge this video=../../theme_settings.carousel_vid2)}}{{/if}}
                    {{/if}}
                    {{#if @index '==' 3}}
                        {{#if (merge this video=../../theme_settings.carousel_vid3)}}{{/if}}
                    {{/if}}
                    {{#if @index '==' 4}}
                        {{#if (merge this video=../../theme_settings.carousel_vid4)}}{{/if}}
                    {{/if}}

                    

                    {{#if video}}
                        <div class="heroCarousel-video-wrapper">
                            <div class="heroCarousel-image-box" style="{{#if image_width}}width:{{image_width}}px{{/if}}">
                                {{#and image_height image_width}}<div class="heroCarousel-image-box-padding" style="padding-bottom:{{multiply (divide image_height image_width) 100}}%">{{/and}}
                                    {{> components/common/responsive-img
                                        image=stencil_image
                                        class="heroCarousel-image"
                                        fallback_size='1920w'
                                        lazyload='disabled'
                                    }}
                                {{#and image_height image_width}}</div>{{/and}}
                            </div>
                            <div class="heroCarousel-video"><div data-youtube="{{video}}"></div></div>
                        </div>
                    {{else}}
                        <div class="heroCarousel-image-box" style="{{#if image_width}}width:{{image_width}}px{{/if}}">
                            {{#and image_height image_width}}<div class="heroCarousel-image-box-padding" style="padding-bottom:{{multiply (divide image_height image_width) 100}}%">{{/and}}
                                {{#if @first}}
                                    {{> components/common/responsive-img
                                        image=stencil_image
                                        class="heroCarousel-image"
                                        fallback_size='1920w'
                                        lazyload='disabled'
                                        otherAttributes=(concat (concat (concat (concat 'width="' image_width) '" height="') image_height) '"')
                                    }}
                                {{else}}
                                    {{> components/common/responsive-img
                                        image=stencil_image
                                        class="heroCarousel-image"
                                        fallback_size='1920w'
                                        lazyload='lazyload'
                                        otherAttributes=(concat (concat (concat (concat 'width="' image_width) '" height="') image_height) '"')
                                    }}
                                {{/if}}
                            {{#and image_height image_width}}</div>{{/and}}
                        </div>
                    {{/if}}
                    
                    {{#if heading}}
                        {{> components/carousel-content show_background=true}}
                    {{else}}
                        {{#if text}}
                            {{> components/carousel-content show_background=true}}
                        {{else}}
                            {{#if button_text}}
                                {{> components/carousel-content show_background=false}}
                            {{/if}}
                        {{/if}}
                    {{/if}}
                </a>
            </div>
        </div>
        {{/each}}
    </div>
    {{#if theme_settings.carousel_banners}}
        <div class="heroCarousel-banners">
            {{> components/papa-supermarket/sections/section-bc-banner find="papathemesHeroCarouselBanner"}}
        </div>
    {{/if}}
</section>


<!--Custome Carousal for Mobile-->
<section class="heroCarousel-container mobile {{#if theme_settings.carousel_banners}} heroCarousel-container--hasBanners{{/if}}">
    <div class="heroCarousel"
        data-slick='{
            "dots": true,
            "mobileFirst": true,
            "slidesToShow": 1,
            "slidesToScroll": 1,
            "autoplay": true,
            "autoplaySpeed": {{carousel.swap_frequency}},
            "lazyLoad": "anticipated"
        }'
        {{#if theme_settings.carousel_video_mute}} data-youtube-mute{{/if}}>
       
            
    <a href="/" class="cstm-l0">
            <div class="carousal-container-mbl" >
                <img src="https://cdn11.bigcommerce.com/s-r5k51kqrix/product_images/uploaded_images/mobile-carousal-66.jpg" />
    		    <!--<a href="https://www.smartwheel.ca/inokim/" class="heroCarousel-action button button--primary button--large mobile mobile-carousal-btns"></a>-->
    		    <div class="cstm-pos cstm-c0" ></div>
            </div>
        </a>
        
        <a href="/" class="cstm-l1">
            <div class="carousal-container-mbl" >
                <img src="https://cdn11.bigcommerce.com/s-r5k51kqrix/product_images/uploaded_images/mobile-carousal-57.jpg" />
    		    <!--<a href="https://www.smartwheel.ca/inokim/" class="heroCarousel-action button button--primary button--large mobile mobile-carousal-btns"></a>-->
    		    <div class="cstm-pos cstm-c1" ></div>
            </div>
        </a>
		    
        
        <a href="/" class="cstm-l2">
            <div class="carousal-container-mbl" >
                <img src="https://cdn11.bigcommerce.com/s-r5k51kqrix/product_images/uploaded_images/mobile-carousal-53.jpeg" />
            	<!--<a href="/nanrobot-d6-e-scooter-10-2000w-52v-26ah-black/" class="heroCarousel-action button button--primary button--large mobile mobile-carousal-btns">Pre-Order Now</a>-->
                <div class="cstm-pos cstm-c2" ></div>
            </div>
        </a>
       
        <a href="/" class="cstm-l3">
            <div class="carousal-container-mbl" >
                <img src="https://cdn11.bigcommerce.com/s-r5k51kqrix/product_images/uploaded_images/mobile-carousal-31.jpeg"/>
        	    <!--<a href="/OneWheel_c_114.html" class="heroCarousel-action button button--primary button--large mobile mobile-carousal-btns">Learn More</a>-->
        	    <div class="cstm-pos cstm-c3" ></div>
    	    </div>
        </a>
    
            <a href="/" class="cstm-l4">
            <div class="carousal-container-mbl" >
                <img src="https://cdn11.bigcommerce.com/s-r5k51kqrix/product_images/uploaded_images/mobile-carousal-64.jpg" />
        		<!--<a href="/SmartKick_c_127.html" class="heroCarousel-action button button--primary button--large mobile mobile-carousal-btns">Buy Now</a>-->
                <div class="cstm-pos cstm-c4" ></div>
            </div> 
        </a>
      
    </div>
    {{#if theme_settings.carousel_banners}}
        <div class="heroCarousel-banners">
            {{> components/papa-supermarket/sections/section-bc-banner find="papathemesHeroCarouselBanner"}}
        </div>
    {{/if}}
</section>

<script>
    $(document).ready(function(){
        console.log("test")
        setTimeout(function(){
            var i=0;
            $(".desktop .slick-track .heroCarousel-slide").each(function(index, element) {
                console.log("test")
                try{
                    if (!$(this).hasClass("slick-cloned")) {
                        
                        var des =$(".heroCarousel-content",$(element)).html();
                        
                        $(".cstm-c"+i).append(des);
                        
                        var href = $("a",$(element)).attr('href');
                        
                        $(".cstm-l"+i).attr("href", href);
        
                        i++;
                    }
                }
                catch(e){}
            });
        }, 1000);
    })
</script>