Produktliste in Slider

**karo68** · 02.05.2015, 17:02

Hallo,

ich möchte gerne, dass die Produkte einer Produktliste in einem Slider dargestellt werden. Und zwar soll immer eine bestimmte Anzahl an Produkten (in meinem Fall vier) horizontal dargestellt werden und bei "weiter" die nächsten Produkte. Ist das mit z.B. dem content_slider irgendwie zu erreichen? Alternativ könnte man natürlich alle Produktbilder+Infos in den Slider packen, nur wäre dies für den Kunden erhöhter Pflegeaufwand.

Danke und Gruß
Karsten

**zonky** · 04.05.2015, 13:38

bau Dir ein eigens Template für die Ausgabe - je nach dem, welchen Slider Du verwenden willst komplett "all-in-one" oder bei einem Slider mit "Umschlag" eben nur die Items

Beispiel: http://www.cliqloc.de/shop/dekore/flowerpower.html

**karo68** · 08.05.2015, 09:56

Zitat von zonky

bau Dir ein eigens Template für die Ausgabe - je nach dem, welchen Slider Du verwenden willst komplett "all-in-one" oder bei einem Slider mit "Umschlag" eben nur die Items

Beispiel: http://www.cliqloc.de/shop/dekore/flowerpower.html

Genau so wie im Beispiel würde ich es gerne umsetzen. D.h. also, ich nehme mir das Slider-Template und gehe in diesem Template in einer Iteration die Produktliste durch, richtig?

**zonky** · 08.05.2015, 10:00

jain...

"ich nehme mir das Produktlistentemplate und baue den Slider ein"

**karo68** · 08.05.2015, 10:35

Zitat von zonky

jain...

"ich nehme mir das Produktlistentemplate und baue den Slider ein"

O.K. verstehe. Hast du Lust dein Code-Beispiel mal zu posten, das wäre sehr nett.

**zonky** · 08.05.2015, 12:48

hmm... das wird Dir nicht viel nützen - alles, was man braucht, siehst Du auch im Browser mit "Strg+u"

**karo68** · 08.05.2015, 16:16

Zitat von zonky

hmm... das wird Dir nicht viel nützen - alles, was man braucht, siehst Du auch im Browser mit "Strg+u"

O.K., ich kann erkennen, du hast den Slider "caroufredsel" extern eingebunden und hast im Aufruf die Klasse product_list vergeben. Geht das eigentlich nur, wenn man den Slider extern einbindet?

Ich habe gerade mal diese Anleitung hier befolgt https://community.contao.org/de/show...ktliste+slider, bekomme aber immer nur ein Produkt über die ganze Breite zur Zeit angezeigt.

**zonky** · 08.05.2015, 16:24

ohne link auf deine (test) seite kann man nur raten... vielleicht liegts am sonnensturm...?

**karo68** · 08.05.2015, 16:35

Zitat von zonky

ohne link auf deine (test) seite kann man nur raten... vielleicht liegts am sonnensturm...?

was genau raten? Das nur ein Produkt zur Zeit angezeigt wird? Es ging ja um diese Anleitung https://community.contao.org/de/show...ktliste+slider, nicht um dein Beispiel. Ich habe die Frage dort schon gepostet.

Noch mal zur eigentlichen Frage: geht das ganze nur, wenn man den Slider extern einbindet?

Danke und Gruß
Karsten

**zonky** · 08.05.2015, 16:42

was bedeutet "intern" vs. "extern"?

bekomme aber immer nur ein Produkt über die ganze Breite zur Zeit angezeigt.

kann ich ggf. was sagen wenn ich die Seite (Quelltext) sehe

**karo68** · 08.05.2015, 17:04

Zitat von zonky

was bedeutet "intern" vs. "extern"?

extern=nicht als Contao-Extension

Zitat von zonky

kann ich ggf. was sagen wenn ich die Seite (Quelltext) sehe

Die Seite möchte ich hier ungern bekanntgeben, schicke dir ne PM

**zonky** · 08.05.2015, 17:06

Zitat von karo68

extern=nicht als Contao-Extension

geht sicher beides - dein "extern" ist ggf. einfacher "reinzubasteln"

**karo68** · 27.05.2015, 14:13

Hi,

ich habe jetzt auch CarouFredSel als slider benutzt. Klappt eigentlich wunderbar. Allerdings werden bei mir die prev- und next-Buttons nicht angezeigt, obwohl ich es im Call so gesetzt habe. Auch die clearfix-Klasse wird nicht gesetzt. Jemand eine Idee?

Code:

<script type="text/javascript">
$(document).ready(function() {
    //Using custom configuration
    $('#carousel').carouFredSel({
    	responsive: true,
    	items: 4,
		auto: true,
		prev: '.prev',
		next: '.next',
    	scroll: {
            items: 1,
            pauseOnHover: true
        }
    });
});
</script>

**zonky** · 27.05.2015, 14:24

Zitat von karo68

Jemand eine Idee?

... ggf. - wo ist der Link? ohne diesen wären folgende Ideen vorhanden: es liegt an den Einstellungen, CSS, Implementierung, JavaScript, HTML-DOM oder an was anderem

**Vincent** · 27.05.2015, 14:26

Witziger Zufall, genau das hab ich vor etwa zwei Tagen umgesetzt: Isotope Produktliste mit Caroufredsel als Slider. Ich kann Dir also gerne helfen, falls etwas nicht klappt.

Hier mein Code:

HTML-Code:

<div class="product_list">

	<div id="carousel-wrapper">
		<div id="carousel">
			<?php foreach ($this->products as $product): ?>
			<div<?php echo $product['cssID']; ?> class="<?php echo $product['class']; ?>">
			<?php echo $product['html']; ?>
			</div>
			<?php endforeach; ?>
		</div>
		
		<div class="clearfix"></div>
		
		<div class="caroufredsel_controls" id="caroufredsel_controls_15">
			<div class="caroufredsel_navi" id="caroufredsel_navi_15">
				<a class="caroufredsel_prev" id="caroufredsel_prev_productlist" href="#"><img class="arrow_left" src="files/standardtheme/images/scaffold/Pfeil.svg" alt="Zurück" name="Zurück" /></a>
				<a class="caroufredsel_next" id="caroufredsel_next_productlist" href="#"><img class="arrow_right" src="files/standardtheme/images/scaffold/Pfeil.svg" alt="Vorwärts" name="Vorwärts" /></a>
			</div>
		</div>
	</div>
<script>
!(function($) {
	$(document).ready(function() {
		// Using custom configuration
		$('#carousel').carouFredSel({
			items                : 4,
			direction            : "left",
			scroll : {
				items            : 1,
				easing            : "linear",
				duration        : 1000,
				pauseOnHover    : true
			},
			
			prev : { 
			  button : "#caroufredsel_prev_productlist",
			  key : "left"
		   },

		   next : { 
			  button : "#caroufredsel_next_productlist",
			  key : "right"
		   }
		});
	});
})(jQuery)
</script>

</div>

Vielleicht hilft Dir das ja.

**karo68** · 27.05.2015, 14:42

@Vincent: Du hast also die prev-next und clearfix-Klasse selber im HTML-Code bzw. Template gesetzt?

**Vincent** · 27.05.2015, 14:47

Meinst Du das CSS? Nein, das liegt in meiner layout.css.
clearfix: clear: both; height: 0;
prev und next: width: 45px; position: absolute, und entsprechend left, right und top gesetzt.

**karo68** · 27.05.2015, 15:09

Zitat von Vincent

Meinst Du das CSS? Nein, das liegt in meiner layout.css.
clearfix: clear: both; height: 0;
prev und next: width: 45px; position: absolute, und entsprechend left, right und top gesetzt.

Nein, ich meine schon den HTML-Code

Code:

	<div class="clearfix"></div>
		
		<div class="caroufredsel_controls" id="caroufredsel_controls_15">
			<div class="caroufredsel_navi" id="caroufredsel_navi_15">
				<a class="caroufredsel_prev" id="caroufredsel_prev_productlist" href="#"><img class="arrow_left" src="files/standardtheme/images/scaffold/Pfeil.svg" alt="Zurück" name="Zurück" /></a>
				<a class="caroufredsel_next" id="caroufredsel_next_productlist" href="#"><img class="arrow_right" src="files/standardtheme/images/scaffold/Pfeil.svg" alt="Vorwärts" name="Vorwärts" /></a>
			</div>
		</div>

Ist klar, dass das dann bei mir dann nicht funktioniert. Dieser fehlt nämlich in meinem Template

Ich bin davon ausgegangen, dass die prev-next-buttons durch den Aufruf automatisch gesetzt werden. Da war mein Denkfehler.