		<div id="product"<?# productStyle ?>>
			<h2 class="title" data-aos="fade-down"><?# indexPTitle ?></h2>
			<div class="pro-list" data-aos="fade-up">
				<php:repeater id="listP">
				<template>
				<div>
					<a class="photo" href="<?# link ?>" title="<?# ProductName ?>" style="background-image:url(<?# IconImage ?>);"><img src="/images/29/img-productPhoto.png" alt="<?# ProductName ?>"></a>
					<div class="info">
						<h3><a class="text-clamp" href="<?# link ?>" title="<?# ProductName ?>"><?# ProductName ?></a></h3>
						<p class="price"<?# sellStyle ?>><span class="old"<?# oldPriceStyle ?>>原價<b><?# OldPrice ?></b>元</span><span<?# priceStyle ?>>特價<?# Price ?>元</span></p>
					</div>
				</div>
				</template>
				</php:repeater>
			</div>
			<div class="btn">
				<a id="prevBtn" href="javascript:void(0);" title="PREV"></a>
				<a id="nextBtn" href="javascript:void(0);" title="NEXT"></a>
			</div>
			<p class="more"><a href="<?# indexPMLink ?>" title="<?# indexPMLinkTitle ?>"><font><?# indexPMLinkTitle ?></font><span></span></a></p>
		</div>
<script>
	$(function(){
		$('#product .pro-list').slick({
			autoplay: true,
			centerMode: true,
			centerPadding: '15%',
			slidesToShow: 3,
			prevArrow:$("#prevBtn"),
			nextArrow:$("#nextBtn"),
			responsive: [{
				breakpoint: 1601,
				settings: { centerPadding: '10%' }
			},{
				breakpoint: 1025,
				settings: { centerPadding: '5%' }
			},{
				breakpoint: 981,
				settings: { slidesToShow: 1, centerPadding: '30%' }
			},{
				breakpoint: 641,
				settings: { slidesToShow: 1, centerPadding: '20%' }
			},{
				breakpoint: 481,
				settings: { slidesToShow: 1, centerPadding: '0' }
			}]
		});
	});
</script>