first commit
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
|
||||
|
||||
<div id="homepage-carousel{$group_name}" class="homepage-carousel">
|
||||
{if ($count > 1) && ($banner_arrows)}
|
||||
<a class="arrow-left {$group_name}left relative" href="#" ></a>
|
||||
<a class="arrow-right {$group_name}right relative" href="#" ></a>
|
||||
{/if}
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
{foreach from=$banners item=banner name=slide}
|
||||
<div class="swiper-slide">
|
||||
|
||||
{if $banner->getLink()}
|
||||
{if $banner->hasAbsoluteLink()}
|
||||
<a href="{$banner->getLink()}" target="_blank">
|
||||
{else}
|
||||
<a href="{$banner->getLink()}" target="_parent">
|
||||
{/if}
|
||||
{/if}
|
||||
{if $banner->getImageSmall()}
|
||||
{if $count > 1}
|
||||
<img class="hidden-us img-responsive swiper-lazy" data-src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
|
||||
<img class="visible-us img-responsive swiper-lazy" data-src="{st_asset_image_path image=$banner->getImageSmallPath() type='thumb' for='slide_mobile'}" alt="" title="{$banner->getDescription()}" />
|
||||
{else}
|
||||
<img class="hidden-us img-responsive" src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
|
||||
<img class="visible-us img-responsive" src="{st_asset_image_path image=$banner->getImageSmallPath() type='thumb' for='slide_mobile'}" alt="" title="{$banner->getDescription()}" />
|
||||
{/if}
|
||||
{else}
|
||||
{if $count > 1}
|
||||
<img class="img-responsive swiper-lazy" data-src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
|
||||
{else}
|
||||
<img class="img-responsive" src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
|
||||
{/if}
|
||||
{/if}
|
||||
{if $count > 1}<div class="swiper-lazy-preloader"></div>{/if}
|
||||
{if $banner->getLink() != ''}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{if ($count > 1) && ($banner_pagination)}
|
||||
<div class="{$group_name}-pagination swiper-pagination"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if $count > 1}
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
jQuery(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
var count_banner = {/literal}{$count}{literal};
|
||||
|
||||
if ($.cookies.get('banner_index_{/literal}{$group_name}{literal}')) {
|
||||
var slide_index = $.cookies.get('banner_index_{/literal}{$group_name}{literal}');
|
||||
|
||||
if (!Number.isInteger(slide_index) || slide_index > count_banner || slide_index < 0 ) {
|
||||
var slide_index = 0;
|
||||
}
|
||||
|
||||
} else {
|
||||
var slide_index = 0;
|
||||
}
|
||||
|
||||
var swiper = new Swiper('#homepage-carousel{/literal}{$group_name}{literal} .swiper-container', {
|
||||
initialSlide: slide_index,
|
||||
pagination: {
|
||||
el: '.{/literal}{$group_name}{literal}-pagination',
|
||||
type: 'bullets',
|
||||
clickable: true,
|
||||
bulletClass: 'swiper-pagination-switch',
|
||||
bulletActiveClass: 'swiper-active-switch',
|
||||
},
|
||||
autoplay: {
|
||||
delay: {/literal}{$banner_delay}{literal},
|
||||
disableOnInteraction: false
|
||||
},
|
||||
preloadImages: false,
|
||||
lazy: {
|
||||
loadOnTransitionStart: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.{/literal}{$group_name}{literal}right',
|
||||
prevEl: '.{/literal}{$group_name}{literal}left'
|
||||
},
|
||||
loop:true,
|
||||
grabCursor: true,
|
||||
speed: 700,
|
||||
effect: {/literal}'{$banner_effect}'{literal}
|
||||
});
|
||||
|
||||
swiper.on('slideChange', function () {
|
||||
|
||||
console.log('slide changed '+this.realIndex);
|
||||
|
||||
//slide memory
|
||||
var expires_at = new Date();
|
||||
expires_at.setTime(expires_at.getTime() + 1000 * 30 * 24 * 60 * 60);
|
||||
|
||||
$.cookies.set('banner_index_{/literal}{$group_name}{literal}', this.realIndex, {path: '/', expiresAt: expires_at});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/literal}
|
||||
{/if}
|
||||
|
||||
{literal}
|
||||
<style type="text/css">
|
||||
#homepage-carousel .swiper-slide
|
||||
{
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
{/literal}
|
||||
@@ -0,0 +1,200 @@
|
||||
<div id="homepage-carousel{$group_name}" class="homepage-carousel slide-banner-new{if $banner_animation_on} animated {$banner_animation_style}{/if}">
|
||||
{if !$group_name}
|
||||
{st_get_component module="stSocialLinksFrontend" component="show"}
|
||||
{/if}
|
||||
{if ($count > 1) && ($banner_arrows)}
|
||||
<a class="arrow-left left relative" href="#">
|
||||
<img src="{image_path image='arrow-left.svg'}" alt="" />
|
||||
</a>
|
||||
<a class="arrow-right right relative" href="#">
|
||||
<img src="{image_path image='arrow-right.svg'}" alt="" />
|
||||
</a>
|
||||
{/if}
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
{foreach from=$banners item=banner name=slide}
|
||||
<div
|
||||
{if $banner->getLink() && !$banner->getButtonLink()}
|
||||
{if $banner->hasAbsoluteLink()}
|
||||
onclick="window.open('{$banner->getLink()}', '_blank');"
|
||||
{else}
|
||||
onclick="window.open('{$banner->getLink()}', '_parent');"
|
||||
{/if}
|
||||
{/if}
|
||||
{if $banner->getButtonLink()}
|
||||
{if $banner->hasAbsoluteButtonLink()}
|
||||
onclick="window.open('{$banner->getButtonLink()}', '_blank');"
|
||||
{else}
|
||||
onclick="window.open('{$banner->getButtonLink()}', '_parent');"
|
||||
{/if}
|
||||
{/if}
|
||||
class="swiper-slide swiper-slide-desktop{if $count > 1} swiper-lazy{/if}{if $banner->getBannerBgOut()} swiper-dark{/if}"
|
||||
{if $banner->getImage() && !$banner->getVideoMp4()}
|
||||
{if $count > 1}
|
||||
data-background="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}"
|
||||
{else}
|
||||
style="background-image: url({st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'})"
|
||||
{/if}
|
||||
{/if}>
|
||||
<div class="swiper-slide-mobile{if $count > 1} swiper-lazy{else} swiper-single{/if}"
|
||||
{if $banner->getImageSmall() && !$banner->getVideoMp4()}
|
||||
{if $count > 1}
|
||||
data-background="{st_asset_image_path image=$banner->getImageSmallPath() type='thumb' for='slide_mobile'}"
|
||||
{else}
|
||||
style="background-image: url({st_asset_image_path image=$banner->getImageSmallPath() type='thumb' for='slide_mobile'})"
|
||||
{/if}
|
||||
{/if}
|
||||
>
|
||||
{if $count > 1}<div class="swiper-lazy-preloader"></div>{/if}
|
||||
{if $banner->getVideoMp4() || $banner->getVideoMp4Link()}
|
||||
<div class="video-banner-bg">
|
||||
<video loop="" muted=""{if $count == 1} autoplay{/if} playsinline>
|
||||
|
||||
{if $banner->getVideoMp4()}
|
||||
<source src="/uploads{$banner->getVideoMp4()}" type="video/mp4">
|
||||
{/if}
|
||||
|
||||
{if $banner->getVideoMp4Link()}
|
||||
<source src="{$banner->getVideoMp4Link()}" type="video/mp4">
|
||||
{/if}
|
||||
|
||||
</video>
|
||||
</div>
|
||||
{/if}
|
||||
{strip}
|
||||
<div class="caption animation1
|
||||
{if $banner->getBannerDescriptionPosition()==0} dark{else} light{/if}
|
||||
{if $banner->getBannerTextAlign()==1} text-left{elseif $banner->getBannerTextAlign()==2} text-right{elseif $banner->getBannerTextAlign()==3} text-center{/if}
|
||||
{if $banner->getBannerBgText()==1} small-padding{/if}{if (100 - ( $banner->getBannerMarginLeft() + $banner->getBannerMarginRight() ) ) > 40} font-regular-size{elseif (100 - ( $banner->getBannerMarginLeft() + $banner->getBannerMarginRight() ) ) <= 30} font-minimal-size{else} font-medium-size{/if}"
|
||||
style="
|
||||
{if $banner->getBannerMarginLeft()!=''} margin-left:{$banner->getBannerMarginLeft()}%;{/if}
|
||||
{if $banner->getBannerMarginRight()!=''} margin-right:{$banner->getBannerMarginRight()}%;{/if}
|
||||
"
|
||||
>
|
||||
<div{if $banner->getBannerBgText()==1} class="banner-text-background"{/if}>
|
||||
{if $banner->getBannerTitle()}<h3>{$banner->getBannerTitle()}</h3>{/if}
|
||||
{if $banner->getBannerDescription()}<p>{$banner->getBannerDescription()}</p>{/if}
|
||||
{if $banner->getButtonText()!=""}
|
||||
<a class="btn btn-primary btn-round btn-transparent">
|
||||
{$banner->getButtonText()}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/strip}
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{if ($count > 1) && ($banner_pagination)}
|
||||
<div class="{$group_name}-pagination swiper-pagination"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{literal}
|
||||
<style type="text/css">
|
||||
#homepage-carousel .swiper-slide
|
||||
{
|
||||
height: {/literal} {$banner_height_mobile} {literal};
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#homepage-carousel .swiper-slide
|
||||
{
|
||||
height: {/literal} {$banner_height} {literal};
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{/literal}
|
||||
|
||||
{if $count > 1}
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
jQuery(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
let prevIndex;
|
||||
let prevVideo;
|
||||
let prevIndexMemory;
|
||||
let prevEnd;
|
||||
var count_banner = {/literal}{$count}{literal};
|
||||
|
||||
if ($.cookies.get('banner_index_{/literal}{$group_name}{literal}')) {
|
||||
var slide_index = $.cookies.get('banner_index_{/literal}{$group_name}{literal}');
|
||||
|
||||
if (!Number.isInteger(slide_index) || slide_index > count_banner || slide_index < 0 ) {
|
||||
var slide_index = 0;
|
||||
}
|
||||
|
||||
} else {
|
||||
var slide_index = 0;
|
||||
}
|
||||
|
||||
var swiper = new Swiper('#homepage-carousel{/literal}{$group_name}{literal} .swiper-container', {
|
||||
initialSlide: slide_index,
|
||||
pagination: {
|
||||
el: '.{/literal}{$group_name}{literal}-pagination',
|
||||
type: 'bullets',
|
||||
clickable: true,
|
||||
bulletClass: 'swiper-pagination-switch',
|
||||
bulletActiveClass: 'swiper-active-switch',
|
||||
},
|
||||
autoplay: {
|
||||
delay: {/literal}{$banner_delay}{literal},
|
||||
disableOnInteraction: false
|
||||
},
|
||||
preloadImages: false,
|
||||
lazy: {
|
||||
loadOnTransitionStart: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '#homepage-carousel{/literal}{$group_name}{literal} .right',
|
||||
prevEl: '#homepage-carousel{/literal}{$group_name}{literal} .left'
|
||||
},
|
||||
loop:true,
|
||||
grabCursor: true,
|
||||
speed: 700,
|
||||
effect: {/literal}'{$banner_effect}'{literal},
|
||||
on: {
|
||||
init: function () {
|
||||
var currentVideo = $("#homepage-carousel{/literal}{$group_name}{literal} [data-swiper-slide-index=" + this.realIndex + "] video");
|
||||
currentVideo.trigger('play');
|
||||
},
|
||||
slideChange: function() {
|
||||
|
||||
prevVideo = $("#homepage-carousel{/literal}{$group_name}{literal} [data-swiper-slide-index=" + prevIndex + "] video");
|
||||
currentVideo = $("#homepage-carousel{/literal}{$group_name}{literal} [data-swiper-slide-index=" + this.realIndex + "] video");
|
||||
|
||||
if(prevVideo.length > 0){
|
||||
//save previous index value to delay
|
||||
prevIndexMemory = prevIndex*1;
|
||||
setTimeout(function () {
|
||||
//stop previous video
|
||||
$("#homepage-carousel{/literal}{$group_name}{literal} [data-swiper-slide-index=" + prevIndexMemory + "] video").trigger('pause');
|
||||
}, 700);
|
||||
}
|
||||
|
||||
// play video if is's possible and recommend
|
||||
if((prevEnd != true) && (prevIndex != this.realIndex) && (currentVideo.length > 0)) {
|
||||
currentVideo.prop('currentTime', 0).prop('muted', true);
|
||||
currentVideo.trigger('play');
|
||||
}
|
||||
|
||||
//slide memory
|
||||
var expires_at = new Date();
|
||||
expires_at.setTime(expires_at.getTime() + 1000 * 30 * 24 * 60 * 60);
|
||||
|
||||
$.cookies.set('banner_index_{/literal}{$group_name}{literal}', this.realIndex, {path: '/', expiresAt: expires_at});
|
||||
|
||||
//correct previous slide index and last
|
||||
prevIndex = this.realIndex;
|
||||
prevEnd = this.isEnd;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/literal}
|
||||
{/if}
|
||||
Reference in New Issue
Block a user