145 lines
3.9 KiB
Plaintext
145 lines
3.9 KiB
Plaintext
<div class="widget-link widget12">
|
|
<h3 class="widget-title">
|
|
<span>{{widget-title}}</span>
|
|
</h3>
|
|
<div class="widget-slideshow-wrap">
|
|
<ul class="widget-slideshow list-unstyled" data-level="0" data-list="web_link">
|
|
<li class="widget-content widget-content-horizontal">
|
|
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
|
<div class="link-img-wrap{{display_image}}">
|
|
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
|
</div>
|
|
</a>
|
|
<div class="widget-content-title">
|
|
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
|
|
<span data-list="statuses" data-level="1">
|
|
<span class="label status {{status-class}}">{{status}}</span>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="widget-banner-pager"></div>
|
|
</div>
|
|
<script>
|
|
function initWidget7Carousel() {
|
|
$('.widget-link.widget7').each(function() {
|
|
var $widget = $(this);
|
|
var $ul = $widget.find('.widget-slideshow');
|
|
var $items = $ul.find('li.widget-content');
|
|
var $pager = $widget.find('.widget-banner-pager');
|
|
var perPage = 5;
|
|
var total = $items.length;
|
|
var pageCount = Math.ceil(total / perPage);
|
|
var current = 0;
|
|
var isAnimating = false;
|
|
|
|
$ul.css({ position: 'relative', left: 0 });
|
|
|
|
// 建立點點
|
|
$pager.empty();
|
|
for (var i = 0; i < pageCount; i++) {
|
|
$pager.append('<span data-page="' + i + '"></span>');
|
|
}
|
|
|
|
function initItemWidth() {
|
|
var wrapWidth = $widget.find('.widget-slideshow-wrap').outerWidth();
|
|
var itemWidth = wrapWidth / perPage;
|
|
$items.css('width', itemWidth + 'px');
|
|
$ul.css('width', (itemWidth * total) + 'px');
|
|
}
|
|
|
|
function goToPage(page) {
|
|
if (isAnimating || page === current) return;
|
|
isAnimating = true;
|
|
|
|
var wrapWidth = $widget.find('.widget-slideshow-wrap').outerWidth();
|
|
var itemWidth = wrapWidth / perPage;
|
|
var ulWidth = itemWidth * total;
|
|
|
|
// ✅ 關鍵修正：最後一頁不能超過 ul 總寬 - wrap寬
|
|
var maxLeft = ulWidth - wrapWidth;
|
|
var targetLeft = Math.min(page * wrapWidth, maxLeft);
|
|
|
|
$ul.animate({ left: -targetLeft }, {
|
|
duration: 400,
|
|
easing: 'swing',
|
|
complete: function() {
|
|
current = page;
|
|
isAnimating = false;
|
|
}
|
|
});
|
|
|
|
$pager.find('span')
|
|
.removeClass('cycle-pager-active')
|
|
.filter('[data-page="' + page + '"]')
|
|
.addClass('cycle-pager-active');
|
|
}
|
|
|
|
$pager.on('click', 'span', function() {
|
|
goToPage(parseInt($(this).data('page')));
|
|
});
|
|
|
|
$(window).on('resize', function() {
|
|
initItemWidth();
|
|
var wrapWidth = $widget.find('.widget-slideshow-wrap').outerWidth();
|
|
var itemWidth = wrapWidth / perPage;
|
|
var ulWidth = itemWidth * total;
|
|
var maxLeft = ulWidth - wrapWidth;
|
|
var targetLeft = Math.min(current * wrapWidth, maxLeft);
|
|
$ul.css('left', -targetLeft);
|
|
});
|
|
|
|
initItemWidth();
|
|
$pager.find('[data-page="0"]').addClass('cycle-pager-active');
|
|
});
|
|
}
|
|
|
|
$(function() {
|
|
initWidget7Carousel();
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
.widget-link {
|
|
.widget-slideshow-wrap {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.widget-slideshow {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
will-change: transform;
|
|
}
|
|
|
|
.widget-content-horizontal {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.widget-banner-pager {
|
|
clear: both;
|
|
position: relative;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
|
|
.cycle-pager-active {
|
|
background: #869791;
|
|
}
|
|
}
|
|
|
|
.widget-banner-pager span {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: 0 4px;
|
|
background: #ccc;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
</style>
|