<link type="text/css" rel="stylesheet" href="{@RELATIVE_WCF_DIR}style/slider.css" />

<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/jquery.js"></script>

<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/jquery.easing.js"></script>

<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/script.js"></script>

<script type="text/javascript">

	jQuery(document).ready( function(){	

		jQuery("#lofslidecontent45").lofJSidernews( {

			interval:4000,

			direction:"opacity",

			duration:500,

			startItem:{@$sliderid},

			gameID:{@$gameid},

			easing:"easeInOutSine"

		} );

	});

</script>

<div id="container">

	<div id="lofslidecontent45" class="lof-slidecontent  lof-snleft">

		<div class="preload"><div>

	</div>

</div>

<div class="lof-main-outer">

	<ul class="lof-main-wapper">

		{foreach from=$sliderdata item=$value}

		<li>

			<img title="{@$value.link}" src="{@RELATIVE_WCF_DIR}images/slider/large/{@$value.mainimage}" height="240" width="900">

			<div class="lof-main-item-desc">

				<h3>

					<a target="_parent" title="{@$value.link}" href="index.php?page=Thread&threadID={@$value.link}">{@$value.mainheadline}</a>

				</h3>

				<p>{@$value.maintext}</p>

			</div>

		</li>

		{/foreach}

	</ul>

</div>

<div class="lof-navigator-outer">

	<ul class="lof-navigator">

		{foreach from=$sliderdata item=$value}

		<li>

			<div>

				<img src="{@RELATIVE_WCF_DIR}images/slider/thumbs/{@$value.logoleft}" />

				<h3>{@$value.headlineleft}</h3>

				<span>{@$value.textleft}</span>

			</div>

		</li>

		{/foreach}

	</ul>

</div>

</div>

</div>