<div id="bookbox"<?# bookStyle ?>>
	<div class="container flex">
		<div class="sectionTitle"><h2><?# indexBTitle ?></h2></div>
		<div class="btn"><a class="more" href="<?# indexBMLink ?>" title="<?# indexBMLinkTitle ?>"><span><?# indexBMLinkTitle ?><i class="fa fa-chevron-right"></i></span></a></div>
	</div>
	<div class="book-bg">
		<div class="swiper-container">
			<div class="swiper-wrapper book-content">
				<php:repeater id="listB">
				<template>
				<div class="swiper-slide book-item">
					<div class="photobox"><div><a class="photo" href="<?# link ?>" title="<?# BookName ?>" style="background-image:url(<?# BookImage ?>);"><img src="/images/28/book-blank.png" alt="<?# BookName ?>"></a></div></div>
					<div class="info"><h3><a class="title text-clamp" href="<?# link ?>" title="<?# BookName ?>"><?# BookName ?></a></h3></div>
				</div>
				</template>
				</php:repeater>
			</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>
</div>
<script>
	var bookswiper = new Swiper('#bookbox .swiper-container', {
		slidesPerView: 3,
		spaceBetween: 30,
		loop:true,
		autoplay: {
			// 防止點擊後自動播放停止
			disableOnInteraction: false,
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		breakpoints: {
			1024: {
				slidesPerView: 2,
			},
			768:{
				slidesPerView:'auto',
			}
		}
	});
</script>