first commit
This commit is contained in:
@@ -0,0 +1,176 @@
|
||||
<div id="homepage-baner" {if $banner_wide}class="wide"{/if}>
|
||||
{if !$banner_wide}<div class="container">{/if}
|
||||
|
||||
<div id="homepage-carousel{$group_name}" class="homepage-carousel">
|
||||
{if ($count > 1) && ($banner_arrows)}
|
||||
<a class="arrow-left {$group_name}left relative" href="#">
|
||||
<svg width="57" height="16" viewBox="0 0 57 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.292893 8.70711C-0.0976311 8.31658 -0.0976311 7.68342 0.292893 7.29289L6.65685 0.928932C7.04738 0.538408 7.68054 0.538408 8.07107 0.928932C8.46159 1.31946 8.46159 1.95262 8.07107 2.34315L2.41421 8L8.07107 13.6569C8.46159 14.0474 8.46159 14.6805 8.07107 15.0711C7.68054 15.4616 7.04738 15.4616 6.65685 15.0711L0.292893 8.70711ZM56 7C56.5523 7 57 7.44772 57 8C57 8.55228 56.5523 9 56 9V7ZM1 7L56 7V9L1 9L1 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="arrow-right {$group_name}right relative" href="#" >
|
||||
<svg width="57" height="16" viewBox="0 0 57 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M56.7071 8.70711C57.0976 8.31658 57.0976 7.68342 56.7071 7.29289L50.3431 0.928932C49.9526 0.538408 49.3195 0.538408 48.9289 0.928932C48.5384 1.31946 48.5384 1.95262 48.9289 2.34315L54.5858 8L48.9289 13.6569C48.5384 14.0474 48.5384 14.6805 48.9289 15.0711C49.3195 15.4616 49.9526 15.4616 50.3431 15.0711L56.7071 8.70711ZM1 7C0.447716 7 1.19209e-06 7.44772 1.19209e-06 8C1.19209e-06 8.55228 0.447716 9 1 9V7ZM56 7L1 7V9L56 9V7Z" />
|
||||
</svg>
|
||||
</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 !$banner_wide}</div>{/if}
|
||||
|
||||
{if $count > 1}
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
jQuery(function ($) {
|
||||
|
||||
function scrollBanner(){
|
||||
var bannerHeight = $('#homepage-carousel').height(); //yes
|
||||
var windowHeight = $(window).height(); //yes
|
||||
var topHeight = $('#top').outerHeight();
|
||||
var bannerHeight = $('#homepage-baner').outerHeight();
|
||||
var scrollBannerEnd = bannerHeight - windowHeight + topHeight;
|
||||
if ($(window).width() > 768) {
|
||||
var scrolled = $(window).scrollTop();
|
||||
|
||||
// if((bannerHeight+topHeight) > windowHeight){
|
||||
if(((bannerHeight / 6)+scrolled) < (bannerHeight -200)){
|
||||
$('.homepage-carousel .swiper-pagination').css('top', (bannerHeight / 6)+scrolled);
|
||||
}else{
|
||||
$('.homepage-carousel .swiper-pagination').css('top', bannerHeight -200);
|
||||
}
|
||||
// }
|
||||
|
||||
if (scrolled >= scrollBannerEnd){
|
||||
$('#homepage-carousel .arrow-left, #homepage-carousel .arrow-right').css('position', 'absolute').css('bottom', '70px');
|
||||
}else{
|
||||
$('#homepage-carousel .arrow-left, #homepage-carousel .arrow-right').css('position', '').css('bottom', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(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: 'custom',
|
||||
clickable: true,
|
||||
renderCustom: function (swiper, current, total) {
|
||||
var customPaginationFraction = "";
|
||||
var customPaginationBullet = "";
|
||||
current = '0'+current;
|
||||
total = '0'+total;
|
||||
customPaginationFraction += '<span class="swiper-pagination-fraction"><span class="active-fraction">' + current + '</span>/'+ total + '</span>';
|
||||
for(var i = 0; i < total; i++) {
|
||||
//Determine which pager should be activated at this time
|
||||
if(i == (current - 1)) {
|
||||
customPaginationBullet += '<span class="swiper-pagination-switch swiper-active-switch" role="button"></span>';
|
||||
} else {
|
||||
customPaginationBullet += '<span class="swiper-pagination-switch" role="button"></span>';
|
||||
}
|
||||
}
|
||||
return '<div class="pagination-fraction">' + customPaginationFraction + '</div><div class="pagination-bullet hidden-xs">' + customPaginationBullet + '</div>';
|
||||
}
|
||||
},
|
||||
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});
|
||||
});
|
||||
|
||||
scrollBanner()
|
||||
$(window).scroll(function(){
|
||||
scrollBanner()
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/literal}
|
||||
{/if}
|
||||
|
||||
{literal}
|
||||
<style type="text/css">
|
||||
#homepage-carousel .swiper-slide
|
||||
{
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
{/literal}
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,252 @@
|
||||
<div id="homepage-baner" {if $banner_wide}class="wide"{/if}>
|
||||
{if !$banner_wide}<div class="container">{/if}
|
||||
<div id="homepage-carousel{$group_name}" class="homepage-carousel slide-banner-new{if $banner_animation_on} animated {$banner_animation_style}{/if}">
|
||||
{if ($count > 1) && ($banner_arrows)}
|
||||
<a class="arrow-left {$group_name}left relative" href="#">
|
||||
<svg width="57" height="16" viewBox="0 0 57 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.292893 8.70711C-0.0976311 8.31658 -0.0976311 7.68342 0.292893 7.29289L6.65685 0.928932C7.04738 0.538408 7.68054 0.538408 8.07107 0.928932C8.46159 1.31946 8.46159 1.95262 8.07107 2.34315L2.41421 8L8.07107 13.6569C8.46159 14.0474 8.46159 14.6805 8.07107 15.0711C7.68054 15.4616 7.04738 15.4616 6.65685 15.0711L0.292893 8.70711ZM56 7C56.5523 7 57 7.44772 57 8C57 8.55228 56.5523 9 56 9V7ZM1 7L56 7V9L1 9L1 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="arrow-right {$group_name}right relative" href="#" >
|
||||
<svg width="57" height="16" viewBox="0 0 57 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M56.7071 8.70711C57.0976 8.31658 57.0976 7.68342 56.7071 7.29289L50.3431 0.928932C49.9526 0.538408 49.3195 0.538408 48.9289 0.928932C48.5384 1.31946 48.5384 1.95262 48.9289 2.34315L54.5858 8L48.9289 13.6569C48.5384 14.0474 48.5384 14.6805 48.9289 15.0711C49.3195 15.4616 49.9526 15.4616 50.3431 15.0711L56.7071 8.70711ZM1 7C0.447716 7 1.19209e-06 7.44772 1.19209e-06 8C1.19209e-06 8.55228 0.447716 9 1 9V7ZM56 7L1 7V9L56 9V7Z" />
|
||||
</svg>
|
||||
</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() && !$banner->getVideoMp4Link()}
|
||||
{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">
|
||||
{$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>
|
||||
{if !$banner_wide}</div>{/if}
|
||||
|
||||
{literal}
|
||||
<style type="text/css">
|
||||
#homepage-carousel .swiper-slide
|
||||
{
|
||||
min-height: {/literal} {$banner_height_mobile} {literal};
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#homepage-carousel .swiper-slide
|
||||
{
|
||||
min-height: {/literal} {$banner_height} {literal};
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{/literal}
|
||||
|
||||
{if $count > 1}
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
jQuery(function ($) {
|
||||
|
||||
function scrollBanner(){
|
||||
var bannerHeight = $('#homepage-carousel').height(); //yes
|
||||
var windowHeight = $(window).height(); //yes
|
||||
var topHeight = $('#top').outerHeight();
|
||||
var bannerHeight = $('#homepage-baner').outerHeight();
|
||||
var scrollBannerEnd = bannerHeight - windowHeight + topHeight;
|
||||
if ($(window).width() > 768) {
|
||||
var scrolled = $(window).scrollTop();
|
||||
|
||||
// if((bannerHeight+topHeight) > windowHeight){
|
||||
if(((bannerHeight / 6)+scrolled) < (bannerHeight -200)){
|
||||
$('.homepage-carousel .swiper-pagination').css('top', (bannerHeight / 6)+scrolled);
|
||||
}else{
|
||||
$('.homepage-carousel .swiper-pagination').css('top', bannerHeight -200);
|
||||
}
|
||||
// }
|
||||
|
||||
if (scrolled >= scrollBannerEnd){
|
||||
$('#homepage-carousel .arrow-left, #homepage-carousel .arrow-right').css('position', 'absolute').css('bottom', '70px');
|
||||
}else{
|
||||
$('#homepage-carousel .arrow-left, #homepage-carousel .arrow-right').css('position', '').css('bottom', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(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: 'custom',
|
||||
clickable: true,
|
||||
renderCustom: function (swiper, current, total) {
|
||||
var customPaginationFraction = "";
|
||||
var customPaginationBullet = "";
|
||||
current = '0'+current;
|
||||
total = '0'+total;
|
||||
customPaginationFraction += '<span class="swiper-pagination-fraction"><span class="active-fraction">' + current + '</span>/'+ total + '</span>';
|
||||
for(var i = 0; i < total; i++) {
|
||||
//Determine which pager should be activated at this time
|
||||
if(i == (current - 1)) {
|
||||
customPaginationBullet += '<span class="swiper-pagination-switch swiper-active-switch" role="button"></span>';
|
||||
} else {
|
||||
customPaginationBullet += '<span class="swiper-pagination-switch" role="button"></span>';
|
||||
}
|
||||
}
|
||||
return '<div class="pagination-fraction">' + customPaginationFraction + '</div><div class="pagination-bullet hidden-xs">' + customPaginationBullet + '</div>';
|
||||
}
|
||||
},
|
||||
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},
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
scrollBanner()
|
||||
$(window).scroll(function(){
|
||||
scrollBanner()
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/literal}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user