<div class="container home-slider">

	<div class="tp-banner-container">
		<div class="tp-banner">
			<ul>

				<{foreach $section.slider as $slider}>
					<{if $image = $slider.image}>

						<li data-transition="fade" data-slotamount="7" data-masterspeed="1000">
		 					<img src="<{$image->getSrc(1500, 800, 'box')}>"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
		 					<div class="caption <{$slider.color|escape}> sfb fadeout" data-x="750" data-y="170" data-speed="400" data-start="800"  data-easing="Power4.easeOut">
								<h2><{$slider.title|escape}></h2>
								<h3><{$slider.sub_title|escape}></h3>
								<{if $slider.title}>
									<a href="<{$slider.link|escape}>" class="caption-btn"><{$slider.link_title|escape}></a>
								<{/if}>
							</div>
						</li>

					<{/if}>

				<{/foreach}>

			</ul>
		</div>
	</div>

</div>