<div id="bookBox">
	<div class="bg"<?# bookStyle ?>></div>
    <div class="bgTxt title"><?# indexBTitle ?><h3>相本列表</h3></div>
	<div id="BookList" class="row" data-aos="fade-up">
		<ul>
			<php:repeater id="listB">
			<template>
                <li><a class="photo" href="<?# link ?>" title="<?# BookName ?>" style="background-image: url(<?# BookImage ?>);"><img src="/images/42/index-book-img.png" alt="<?# BookName ?>" /></a><h3><a class="text-clamp" href="<?# link ?>" title="<?# BookName ?>"><?# BookName ?></a></h3></li>
			</template>
			</php:repeater>
		</ul>
        <p class="more"><a href="<?# indexBMLink ?>" title="<?# indexBMLinkTitle ?>"><font><?# indexBMLinkTitle ?></font></a></p>		
	</div>    		
    <div id="customBox" class="row">
        <ul>
            <php:repeater id="listC">
            <template>
				<div class="custom">
                    <div class="info">
                        <li><h3><?# CustomTitle ?></h3><article><?# CustomContent ?></article></li>
                        <p class="more"><a href="/contact.html" title="這可以隨時改連結"><font>查看更多</font></a></p>
                    </div>
                    <div class="imgs">
                        <div class="list" style="background-image: url(<?# CustomImage ?>);"></div>
                    </div>
				</div>
            </template>
            </php:repeater>			
        </ul>		
    </div>
</div>
<script>
	$(function(){
		$('#BookList ul').slick({
			dots: false,
			autoplay: true,
			infinite: true,
			centerMode: true,
			centerPadding: '30%',			
			slidesToShow: 1,
			slidesToScroll: 1,						
			speed: 500,			
			responsive: [{
                breakpoint: 1000,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '0%',
                    slidesToShow: 1
                }
            }]
		});
		$('#customBox ul').slick({
			dots: true,
			//autoplay: true,
			infinite: true,
			slidesToShow: 1,			
			speed: 500,			
		});
	});
</script>