Mobile Carousal Banner - Saved 23rd Dec
Sun Dec 24 2023 00:28:48 GMT+0000 (Coordinated Universal Time)
Saved by @misha@11
<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>
Comments