Slideshow ?

Hallo Community!

bastle seit 3 Tagen an einer Slideshow die.ich bekomme das nur nicht habe auch schon nach diversen Extensionens geschaut konnte aber keine wirklich finden die dazu passt.Es sollten 5 Bilder angezeigt werden und mit pfeilen am Rechten und linken Rand weiter geklickt werden klingt einfach aber ich finde keine.
Bild: aaron.de/…/slideshow.jpg

Habe auch schon daran gedacht eine externe javascript Datei einzubinden.
Will aber auch nicht der Pfad wird richtig angesprichen habe ich mehrfach kontrolliert.

Bitte um Hilfe. Vielleicht habt ihr auch einen Denkanstoß für mich wie daran noch gehen könnte.

MFG Avav[/url]

Schau mal hier:
http://www.fladi.de/2008/06/01/howto-coda-slider-mit-jquery-unter-typo3/

Hallo !

Vielen Dank für deine schnelle Antwort. So etwas suche.
Ich arbeite leider ohne TamplaVoila, ansonsten hätte ich es gerne übernommen.

MFG Ava

Hallo

Das ist eigentlich, wenn ich das so beurteilen kann, auch ohne TemplaVoila gut machbar.
Schau dir nur mal den Quellcode an auf der Entwicklerseite der JS-Erweiterung für jQuery (http://www.ndoherty.com/demos/coda-slider/1.1.1/#4)

Du brauchst nur ein paar DIV-Container und ein wenig JS und CSS:

<div class="slider-wrap">
	<div id="slider1" class="csw">
		<div class="panelContainer">
		
			<div class="panel" title="Panel 1">
				<div class="wrapper">

					<h3>Panel 1</h3>
					<p>Coda-Slider v1.1.1 by Niall Doherty.</p>
					<p>For info and usage instructions please see <a href="http://www.ndoherty.com/coda-slider/">ndoherty.com</a></p>
					<p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
					<p><a href="#5" class="cross-link" title="Go to Panel 5">&#171; Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next &#187;</a></p>

				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<h3>Panel 2</h3>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
					<p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>

					<p><a href="#1" class="cross-link" title="Go to Panel 1">&#171; Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next &#187;</a></p>
				</div>
			</div>		
			<div class="panel" title="Panel 3">
				<div class="wrapper">
					<h3>Panel 3</h3>

					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
					<p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
					<p><a href="#2" class="cross-link" title="Go to Panel 2">&#171; Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next &#187;</a></p>
				</div>
			</div>

			<div class="panel" title="Panel 4">
				<div class="wrapper">
					<h3>Panel 4</h3>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
					<p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
					<p><a href="#3" class="cross-link" title="Go to Panel 3">&#171; Previous</a> | <a href="#5" class="cross-link" title="Go to Panel 5">Next &#187;</a></p>

				</div>
			</div>
			<div class="panel" title="Panel 5">
				<div class="wrapper">
					<h3>Panel 5</h3>
					<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/OzGcRXXqPyg">
						<param name="movie" value="http://www.youtube.com/v/OzGcRXXqPyg" />
						<param name="wmode" value="transparent" />

					</object>
					<p><a href="#4" class="cross-link" title="Go to Panel 4">&#171; Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next &#187;</a></p>
				</div>
			</div>
			
		</div><!-- .panelContainer -->
	</div><!-- #slider1 -->

</div><!-- .slider-wrap -->

Ich würde die empfehlen die Inhaltselemente einer Spalte so zu wrapen das Sie wie im Quelcode (oben) ausgegeben werden. Der Rest macht dann das JS.