<link href="/less/<?# webTemplates ?>/banner.less" rel="stylesheet/less">
<link rel="stylesheet" href="/css/<?# webTemplates ?>/banner.css" />
<div class="over_hid pos_rel" id="banner">
	<div class="main-slider">
		<php:repeater id="listP">
		<template>
		<div class="pos_rel item btn_hover">
			<div class="pos_rel talign_center"><img class="pos_rel img_cover" src="<?# BannerImg ?>" alt="<?# Title ?>" /></div>
			<?# video ?>
			<div class="pos_abs d_flex info">
				<div class="pos_rel">
					<h3 class="pos_rel txt"><?# Title ?></h3>
					<p class="pos_rel txt"><?# DanDesc ?></p>
					<font class="over_hid pos_rel d_inblock bg_black_5 talign_center more_btn"><span class="pos_rel d_inblock">MORE</span><svg class="pos_abs"><use xlink:href="/svg/43/icons.svg#arrow"></use></svg></font>
				</div>
			</div>
			<a class="pos_abs" href="<?# Link ?>" title="<?# Title ?>"></a>
		</div>
		</template>
		</php:repeater>
	</div>
	<div class="pos_abs bg_white_5 arrow_bg"></div>
	<div class="pos_abs arrow">
        <a class="talign_center prev" href="javascript:void(0);" title="PREV"><i class="fas fa-chevron-left"></i></a>
        <a class="talign_center next" href="javascript:void(0);" title="NEXT"><i class="fas fa-chevron-right"></i></a>
    </div>
</div>
<script>
$(function(){
	$('#banner .main-slider').slick({
		arrows: true,
		dots: true,
		pauseOnHover: false,
		autoplay: true,
		autoplaySpeed: 5000,
		speed: 600,
		fade: true,
		cssEase: 'linear',
        prevArrow: $("#banner .arrow .prev"),
        nextArrow: $("#banner .arrow .next"),
        customPaging: function(slider, i) {
          return '';
        },
        responsive: [{
            breakpoint: 1281,
            settings: { dots: false }
        }]
	});
});
</script>