114 lines
4.5 KiB
Plaintext
114 lines
4.5 KiB
Plaintext
<div class="w-ad-banner w-ba-banner ad-banner-widget-8 ba-banner-widget-8">
|
|
<div class="w-ad-banner__wrap w-ba-banner__wrap cycle-slideshow"
|
|
data-list="images"
|
|
data-level="0"
|
|
data-cycle-slides=".w-ba-banner__slide"
|
|
data-cycle-log="false"
|
|
data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
|
|
data-cycle-auto-height="{{base_image}}"
|
|
data-cycle-speed="{{speed}}"
|
|
data-cycle-timeout="{{timeout}}"
|
|
data-cycle-fx="carousel"
|
|
data-cycle-pager=".banner_caption_{{subpart-id}}"
|
|
data-pager-template=""
|
|
data-pager-active-class="active-slide"
|
|
data-cycle-swipe=true
|
|
data-cycle-swipe-fx="scrollHorz"
|
|
data-cycle-carousel-visible="4"
|
|
data-cycle-carousel-fluid=true
|
|
data-cycle-timeout="3000"
|
|
>
|
|
<div class="w-ad-banner__slide w-ba-banner__slide {{class}}"
|
|
data-link="{{link}}"
|
|
data-cycle-title="{{title}}"
|
|
data-cycle-desc="{{context}}"
|
|
data-overlay-template="<h3>{{title}}</h3><p>{{desc}}</p>"
|
|
data-target="{{target}}"
|
|
>
|
|
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
|
|
<img class="w-ad-banner__image w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-ad-banner__caption ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
|
|
<div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
|
|
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
|
|
</div>
|
|
<ul class="controlplay"><a class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
|
|
<ul class="button-mid">
|
|
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
|
|
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
|
|
</ul>
|
|
</div>
|
|
<script>
|
|
var flag = 1;
|
|
$('.pause-slide').off('click').click(function(){
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
|
$(this).addClass('active')
|
|
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
|
|
});
|
|
$('.resume-slide').off('click').click(function(){
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
|
$(this).addClass('active')
|
|
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
|
|
});
|
|
$('.next-button').off('click').on('click',function(){
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
|
|
|
})
|
|
$('.prev-button').off('click').on('click',function(){
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
|
})
|
|
// var video_carousels = $('.cycle-slideshow[data-cycle-fx="carousel"]');
|
|
// if(video_carousels) {
|
|
// reinit_cycle();
|
|
// var reinitTimer;
|
|
// $(window).resize(function() {
|
|
// clearTimeout(reinitTimer);
|
|
// reinitTimer = setTimeout(reinit_cycle, 100); // Timeout limits the number of calculations
|
|
// });
|
|
// }
|
|
//
|
|
// function reinit_cycle() {
|
|
// var width = $(window).width(); // Checking size again after window resize
|
|
// if ( width < 768 ) {
|
|
// $(video_carousels).cycle( "destroy" );
|
|
// $(video_carousels).cycle({
|
|
// carouselVisible: 1,
|
|
// });
|
|
// } else if ( width > 768 && width < 980 ) {
|
|
// $(video_carousels).cycle( "destroy" );
|
|
// $(video_carousels).cycle({
|
|
// carouselVisible: 2,
|
|
// });
|
|
// } else {
|
|
// $(video_carousels).cycle( "destroy" );
|
|
// $(video_carousels).cycle({
|
|
// carouselVisible: 4,
|
|
// });
|
|
// }
|
|
// }
|
|
</script>
|
|
<style type="text/css">
|
|
.w-ba-banner .controlplay .resume-slide.active i{
|
|
color: #32D9C3;
|
|
}
|
|
.w-ba-banner .controlplay .pause-slide.active i{
|
|
color: #ff4500;
|
|
}
|
|
.w-ba-banner .controlplay{
|
|
width: auto;
|
|
}
|
|
.w-ba-banner .button-mid{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.next-button,.prev-button{
|
|
cursor: pointer;
|
|
}
|
|
</style>
|