Druckbare Version
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
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?Zitat:
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.Zitat:
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?Zitat:
Zitat von zonky
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.
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.Zitat:
Zitat von zonky
Noch mal zur eigentlichen Frage: geht das ganze nur, wenn man den Slider extern einbindet?
Danke und Gruß
Karsten
was bedeutet "intern" vs. "extern"?
kann ich ggf. was sagen wenn ich die Seite (Quelltext) seheZitat:
bekomme aber immer nur ein Produkt über die ganze Breite zur Zeit angezeigt.
extern=nicht als Contao-ExtensionZitat:
Zitat von zonky
Die Seite möchte ich hier ungern bekanntgeben, schicke dir ne PMZitat:
Zitat von zonky
geht sicher beides - dein "extern" ist ggf. einfacher "reinzubasteln"Zitat:
Zitat von karo68
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>
... 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 anderemZitat:
Zitat von karo68
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:
Vielleicht hilft Dir das ja.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>
@Vincent: Du hast also die prev-next und clearfix-Klasse selber im HTML-Code bzw. Template gesetzt?
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-CodeZitat:
Zitat von Vincent
Ist klar, dass das dann bei mir dann nicht funktioniert. Dieser fehlt nämlich in meinem Template :eek: Ich bin davon ausgegangen, dass die prev-next-buttons durch den Aufruf automatisch gesetzt werden. Da war mein Denkfehler.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>
Dachte ich mir schon. :D Falls Du noch Fragen hast, melde Dich einfach.