<div id="products"<?# productStyle ?>>
	<div class="container flex">
		<div class="sectionTitle">
			<h2><?# indexPTitle ?></h2>
		</div>
		<div class="btn">
			<a class="more" href="<?# indexPMLink ?>" title="<?# indexPMLinkTitle ?>">
				<span><?# indexPMLinkTitle ?><i class="fa fa-chevron-right"></i></span>
			</a>
		</div>
	</div>
	<div class="swiper-container">
		<div class="swiper-wrapper products-list">
			<php:repeater id="listP">
			<template>
			<div class="swiper-slide product-item">
				<div class="photobox"><div><span class="productIndex"></span><a class="photo" href="<?# link ?>" style="background-image:url(<?# IconImage ?>);" title="<?# ProductName ?>"><img src="/images/28/prodcut-blank.png" border="0" alt="<?# ProductName ?>" /></a></div></div>
				<div class="info-content">
					<a class="info" href="<?# link ?>" title="<?# ProductName ?>">
						<p class="proCate"><?# CategoryName ?></p>
						<h3 class="title"><?# ProductName ?></h3>
						<p class="desc text-clamp"><?# Introduction ?></p>
						<p class="price"<?# sellStyle ?>>
							<span class="old"<?# oldPriceStyle ?>>原價<b><?# OldPrice ?></b>元</span>
							<span class="sale" <?# priceStyle ?>>特價<b><?# Price ?></b>元</span>
						</p>
					</a>
				</div>
			</div>
			</template>
			</php:repeater>
		</div>
		<!-- Add Pagination -->
		<div id="progress-content">
			<div class="swiper-pagination"></div>
			<!-- 跑條 -->
			<div class="seek_bar"><div class="seek_line" id="js-seek-line"></div></div>
			<div id="seek_total"></div>
		</div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"><i class="fa fa-chevron-right"></i></div>
		<div class="swiper-button-prev"><i class="fa fa-chevron-left"></i></div>
	</div>
</div>
<script>
	var progressAnimate = $("#js-seek-line");
	var productSwiper = new Swiper('#products .swiper-container', {
		spaceBetween: 40,
		slidesPerView: 'auto',
		loop:true,
		autoplay: {
			// 防止點擊後自動播放停止
			disableOnInteraction: false,
		},
		breakpoints: {
			768: {
			  slidesPerView: 1,
			},
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		pagination: {
			el: '.swiper-pagination',
		},
		on:{
			transitionStart: function(){
				progressAnimate.addClass("change");
			},
			transitionEnd: function(){
				progressAnimate.removeClass("change");
				progressAnimate.addClass("start");
				var activeinfo = $(".product-item.swiper-slide-active .info-content");
				activeinfo[0].className = "info-content active";
				var previnfo = $(".product-item.swiper-slide-prev .info-content");
				previnfo[0].className = "info-content";
				var nextinfo = $(".product-item.swiper-slide-next .info-content");
				nextinfo[0].className = "info-content";
			},
		}
	});
	var itemLength = document.querySelectorAll('.swiper-pagination-bullet');
	var itemTotal = document.getElementById('seek_total');
	if(itemLength.length < 10){
		itemTotal.innerText = "0" + itemLength.length;
	}else{
		itemTotal.innerText = itemLength.length;
	}
	for(var num = 0 ; num < itemLength.length ; num++){
		var progressNum = num + 1;
		if(progressNum < 10){
			itemLength[num].innerText = "0"+ progressNum;
		}else{
			itemLength[num].innerText = progressNum;
		}
	}
	var proNum = document.querySelectorAll('.product-item .productIndex');
	for(var j = 0 ; j < proNum.length ; j++){
		var proNumber = Number(proNum[j].parentElement.parentElement.parentElement.getAttribute('data-swiper-slide-index')) + 1;
		if(proNumber < 10){
			proNum[j].innerText = "0"+ proNumber ;
		}else{
			proNum[j].innerText = proNumber;
		}
	}
</script>