		<div id="bookBox"<?# bookStyle ?>>
			<h2 class="title" data-aos="fade-up"><?# indexBTitle ?></h2>
			<ul data-aos="fade-down">
				<php:repeater id="listB">
				<template>
				<li>
					<a class="photo" href="<?# link ?>" title="<?# BookName ?>" style="background-image:url(<?# BookImage ?>);"><img src="/images/29/img-bookPhoto.png" alt="<?# BookName ?>" /></a>
					<div class="info">
						<h3><a class="text-clamp" href="<?# link ?>" title="<?# BookName ?>"><?# BookName ?></a></h3>
						<article class="text-clamp"><?# Description ?></article>
					</div>
				</li>
				</template>
				</php:repeater>
			</ul>
		</div>
		<p id="bookmore" class="more"><a href="<?# indexBMLink ?>" title="<?# indexBMLinkTitle ?>"><font><?# indexBMLinkTitle ?></font><span></span></a></p>
<script>
	$(function(){
		$('#bookBox ul').slick({
			autoplay: true,
			centerMode: true,
			centerPadding: '15%',
			slidesToShow: 1,
			responsive: [{
				breakpoint: 1281,
				settings: { centerPadding: '10%' }
			},{
				breakpoint: 641,
				settings: { centerPadding: '0' }
			}]
		});
	});
</script>