<div id="productBox">
	<div class="workframe">
        <div class="bg"<?# productStyle ?>></div>       
        <div class="bgTxt title"><?# indexPTitle ?><h3>我們產品</h3></div>
        <ul class="proList" data-aos="fade-up">
            <php:repeater id="listP">
            <template>
                <li>
					<div class="item">
						<div class="Img">                           
                            <a class="photo" href="<?# link ?>" title="<?# ProductName ?>" style="background-image: url(<?# IconImage ?>);"><img src="/images/46/index-product-img.png" alt="<?# ProductName ?>" /></a>
						</div>
                        <div class="info">
                            <h3 class="text-clamp"><?# ProductName ?></h3>                             
                            <article><p class="text-clamp"><?# Introduction ?></p></article>
                        </div>
					</div>
                </li>        
            </template>
            </php:repeater>
        </ul>	
        <p class="more"><a href="<?# indexPMLink ?>" title="<?# indexPMLinkTitle ?>"><font><?# indexPMLinkTitle ?></font></a></p>
    </div>
</div>
<script>
	$(function(){
		$('#productBox ul').slick({
			autoplay: true,			
			infinite: true,
			centerMode: true,
            centerPadding: '18%',
			arrows: true,
            slidesToShow: 1,
			speed: 300,			
			responsive: [{
                breakpoint: 700,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '0%',
                    slidesToShow: 1
                }
            }]
		});
	});
</script>