Hallo Ben,
vielen Dank für deine Version.
Ich habe jetzt noch einen Ansatz mit ausschließlich CSS versucht.
Prinzipiell funktioniert es, es gibt nur noch zwei Schönheitsfehler:
Beim Klick auf die Buttons erscheint ein Rahmen, der selbst durch outline:none; nicht weggeht und zweitens bekomme ich die Pfeile nicht näher an das Laufband heran.
products_treadmill.html
<div class="treadmill_prev">
<button class="treadmill_prev"> </button>
</div>
<div class="treadmill_next">
<button class="treadmill_next"> </button>
</div>
<div id="products_treadmill">
<ul>
{foreach name=aussen item=treadmill_data from=$treadmill_content}
<li>{if $treadmill_data.PRODUCTS_IMAGE}<a href="{$treadmill_data.PRODUCTS_LINK}" title="{$treadmill_data.PRODUCTS_NAME}"><img src="{$treadmill_data.PRODUCTS_IMAGE}" alt="{$treadmill_data.PRODUCTS_NAME}" /></a>
{else}<a href="{$treadmill_data.PRODUCTS_LINK}" title="{$treadmill_data.PRODUCTS_NAME}"><img src="{$tpl_path}img/{$language}/no_image.gif" alt="{$treadmill_data.PRODUCTS_NAME}" /></a>
{/if}
<p><a href="{$treadmill_data.PRODUCTS_LINK}" class="textlink">{$treadmill_data.PRODUCTS_NAME}</a></p>
</li>
{/foreach}
</ul>
</div>
<div style="clear:both"></div>
treadmill.css
.treadmill_prev {
width:32px;
height:250px;
float:left;
text-align:right;
}
button.treadmill_prev {
background:url(../img/prev.gif) center no-repeat;
border:0;
vertical-align:middle;
}
.treadmill_next {
width:32px;
height:250px;
float:right;
text-align:left;
}
button.treadmill_next {
background:url(../img/next.gif) center no-repeat;
border:0;
vertical-align:middle;
}
div#products_treadmill {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:0.8em;
height:250px;
width:450px;
margin:0 auto;
text-align:center;
text-decoration:none;
}
div#products_treadmill ul { width:450px; height:250px; }
div#products_treadmill ul li { width:150px; height:250px; list-style:none; }
div#products_treadmill a.textlink:link { color:#000000; }
div#products_treadmill a.textlink:visited { color:#000000; }
div#products_treadmill a.textlink:hover { color:#555; }
div#products_treadmill a.textlink:active { color:#000000; }
div#products_treadmill a.textlink:focus { color:#000000; }
div#products_treadmill img { display:block; }
products_treadmill.js
$(function() {
$("#products_treadmill").jCarouselLite({
easing: "swing",
visible: 3,
auto: 2000,
speed: 1000,
btnNext: ".treadmill_next", btnPrev: ".treadmill_prev", mouseWheel: true
});
});
