[npslider] Ein responsive jQuery Slider für Inhaltselemente

[giorgiojob]

´Zunächst mal Danke für diesen echt supertollen Slider (Bilder un Inhaltelemente) für Contao. Setzte den Slider gerade in einer 2.11.11 Contao Version ein und wollte mal fragen wohin ich muss, und wie ich statt der generierten und eingeblendeten (Pager) SLider Nummern eine anderen Text hineinbringe, den ich dann auch noch verlinken kann. Will also unter dem Slider eine Navileiste einbauen, die statt den Bildnummern ein Wort beinhalten. Die Funktion, dass dann das entsprechende Sliderbild aufgerufen wird kann schon so bleiben.

Bräuchte hier ein wenig Hilfe, wo und wie ich da den Code verändern muss.

[Mike1410]

Hallo,

ist es möglich in die Felder

- Beschriftung für "weiter"
- Beschriftung für "zurück"

statt Text auch HTML-Tags einzugeben?

Der Hintergrund ist der das ich dann einfach Icons (font-awesome, entypo, ...) dort angeben kann.

Danke

[dhe]

... wollte mal fragen wohin ich muss, und wie ich statt der generierten und eingeblendeten (Pager) SLider Nummern eine anderen Text hineinbringe, den ich dann auch noch verlinken kann.

Geht leider erst ab der Version für Contao 3. Und dort "auch nur" per JavaScript (goToSlide) Funktion des Sliders.

Sorry.

Gruß

[dhe]

Hallo,

ist es möglich in die Felder

- Beschriftung für "weiter"
- Beschriftung für "zurück"

statt Text auch HTML-Tags einzugeben?

Der Hintergrund ist der das ich dann einfach Icons (font-awesome, entypo, ...) dort angeben kann.

Danke

An sich habe ich absichtlich ausgeschaltet, damit ein sauberes Verhalten des Sliders gewährleistet ist.
Du kannst HTML reinschreiben, aber ich weiß nicht, ob dann noch alles richtig funktioniert.
Damit HTML Eingaben möglich sind, musst du in die dcaconfig.php unter "system/modules" folgendes eintragen:

$GLOBALS['TL_DCA']['tl_content']['fields']['npsPrevText']['eval']['allowHtml'] = true;
$GLOBALS['TL_DCA']['tl_content']['fields']['npsNextText']['eval']['allowHtml'] = true; 

*ungetestet.

[dhe]

Mit welchem Aufwand rechnest du denn, um die Thumbnails als zusätzliches Element integrieren zu können?

Wie gesagt, da steckt noch etwas Hirnschmalz drin, vor allem, wie das Element generiert werden soll. Und wie die Zuordnung der Elemente zu den einzelnen Slides vonstatten gehen soll.
Ich denk, 1 Tag sitzt man da schon dran, aber ich komme leider gerade gar nicht dazu, da ich mit anderer Arbeit voll bin.

Gruß

[Mike1410]

Vielen Dank !!!

übrigens wäre die npimagesizes , ne Supererweiterung.

[giorgiojob]

Geht leider erst ab der Version für Contao 3. Und dort "auch nur" per JavaScript (goToSlide) Funktion des Sliders.

Gibt es da gar keine Chance? Das kann ruhig hart codiert sein, da da immer nur 4 Bilder angezeigt werden sollen. Eventuell werden mal die Bilder ausgetauscht bleiben aber immer 4 Stück.

irgendeine Möglichkeit müsste es doch geben auch wenn es nicht updatesicher ist.

Danke auf jeden Fall für die Mühe

[dhe]

irgendeine Möglichkeit müsste es doch geben auch wenn es nicht updatesicher ist.

Es geht schon, aber dazu muss der Slider anders initiiert werden. Ob danach alles ordnungsgemäß klappt, weiß ich nicht.

1. lege das Template ce_npslider_js in "templates" an
2. Ändere Zeile 3 in

var slider = jQuery('#<?php echo $this->sliderId ?>').bxSlider({ //...

3. Per jQuery kannst du nun die einzelnen Slides ansprechen

jQuery('#slider-next').click(function(){
  slider.goToSlide(Zahl); // Zahl ersetzen
  return false;
});

// ungetestet

Gruß

[pyretta]

Hallo dhe,

erstmal vielen Dank für diese tolle Erweiterung! Sie verspricht eine der besten und ausgereiftesten jQuery Slider-Module für Contao zu werden!

Um einen eigenen Pager einzurichten steht in den Slider-Einstellungen ein extra Bereich zur Verfügung, wenn ich das richtig verstanden habe.

Pager-Einstellungen > Eigenen Pager verwenden

Allerdings scheint diese Funktion noch nicht zu funktionieren.
Wenn ich den Anweisungen folge, die man durch Klick auf das Symbol für den Hilfe Assistenten angezeigt bekommt, wird gar kein Pager mehr angezeigt. Die Idee ist aber genial.

Dieser Code wird vorgeschlagen:

<div id="myPager">
  <a data-slide-index="0" href=""><img src="image_1.jpg" /></a>
  <a data-slide-index="0" href=""><img src="image_2.jpg" /></a>
  <a data-slide-index="0" href=""><img src="image_3.jpg" /></a>
</div>

Ich nehme an, dass die Zahl in "data-slide-index" variieren sollte. Also z.B. von 0-5.

Was mir auch aufgefallen ist: Wenn ich das Template des npslider ändere - egal welches von beiden - hat es keinerlei Auswirkung auf das Frontend.

Ich nutze npslider mit Contao 3.2.3.

[Mike1410]

Nach der Betätigung der PagerButtons oder Next/Prev Buttons (manuelle Auswahl), läuft er der Slider nicht mehr automatisch weiter.

Wie kann ich das beheben ??

[skyvaheri]

Hallo liebe Contao-Mitstreiter,

ich bemerke beim Einsatz des Fade-Effekts bei Slidern einen Versatz von 1px nach links während der Animation. So auch beim npslider. Nach der Animation rutscht das Bild wieder an seinen eigentlichen Platz zurück. Bei nächsten Slide aber wieder derselbe Effekt.
Gibt sicher eine ganz simple Lösung, nur habe ich die noch nicht gefunden.
Weiß jemand Rat?

VG

Michael

[Mike1410]

Ist mir auch schon aufgefallen. Allerdings nur beim "Faden". Schade ist auch das der automatische Wechsel der Bilder nach der Betätigung eines Buttons deaktiviert ist.

[GeorgDerks]

Hallo zusammen!

Sehr schöne Erweiterung, vielen Dank dem Entwickler! Einziger kleiner Wermutstropfen ist, dass die Folgeseite von "Mehrere (Inhaltselemente) bearbeiten" nun sehr lang geworden ist ;-).

Meine Frage: Welcher Parameter im Inhaltselement "Slider Kontroll-Element" des Backends legt den "swipeThreshold" fest? Der ist nicht gesetzt und zerschießt daher den ganzen Slider (Elemente werden untereinander dargestellt, ohne Steuerungselemente und Überblendung). So sieht's bisher aus:

<script>
jQuery(document).ready(function(){
jQuery('#npslider-6').bxSlider({
speed: 2000,
pause: 6000,
touchEnabled: false,
oneToOneTouch: false,
swipeThreshold: ,
preventDefaultSwipeX: false,
pager: false,
nextText: '<img src="files/standard/images/galerie_next.png" alt="weiter">',
prevText: '<img src="files/standard/images/galerie_prev.png" alt="zurück">',
auto: true,
autoHover: true,
autoDirection: 'next',
mode: 'fade'
});
});
</script>

[dhe]

Ja irgendwie ein komischer Bug.
Ich hab's jetzt mal versucht zu fixen, müsste jetzt gehen

Gruß

[GeorgDerks]

Super, vielen Dank!

[imacfan]

Habe gerdae auf Version 3.2.0 alpha1 build 7 aktualisiert.
Jetzt läuft er "unrund", wechselt unverhofft die Richtung und springt.
Die Slides sind bisher in Endlosschleife gelaufen.

<script>
jQuery(document).ready(function(){
jQuery('#npslider-218').bxSlider({
speed: 1000,
pause: 3000,
touchEnabled: false,
oneToOneTouch: false,
preventDefaultSwipeX: false,
pager: false,
nextText: '<img src="files/theme/img/slider_vor.png" alt="weiter">',
prevText: 'zurück',
nextSelector: '#next-container',
prevSelector: '#prev-container',
auto: true,
autoHover: true,
autoDirection: 'prev',
autoDelay: 10,
mode: 'horizontal'
});
});
</script>

Contao 3.2.7

Was kann ich tun?

Danke
Jörg

[dhe]

Hm, komsich, da bei mir der Slider sehr rund läuft. Am besten das Startelement nochmal neu anlegen.

Anderer Browser mal probiert?
Hast du eine Demopage?

[imacfan]

Hallo dhe,

ich habe dir dazu eine PN geschickt.

Gruß
Jörg

[imacfan]

ich hatte auf der gleichen Seite Mootools geladen (wenn auch ohne Template). Das scheint das Problem gewesen zu sein. Jedenfalls läuft es jetzt wieder wie gewohnt.

[skyvaheri]

Hallo liebe Contao-Mitstreiter,

ich bemerke beim Einsatz des Fade-Effekts bei Slidern einen Versatz von 1px nach links während der Animation. So auch beim npslider. Nach der Animation rutscht das Bild wieder an seinen eigentlichen Platz zurück. Bei nächsten Slide aber wieder derselbe Effekt.
Gibt sicher eine ganz simple Lösung, nur habe ich die noch nicht gefunden.
Weiß jemand Rat?

VG

Michael

Gibts denn dazu vom Entwickler keine Idee?

VG,

Michael

[Mike1410]

Ist mir auch schon aufgefallen.

[Samson1964]

Unter 3.1.5 wird jquery.bxslider.min.js nicht automatisch eingebunden. Ich hatte erst die aktuelle Erweiterung für Contao 3.2 installiert, als diese nichts animierte, habe ich die Version für Contao 3.1 drüberkopiert. Animierte immer noch nichts: Javascriptfehler, Funktion bxslider nicht gefunden. Nach dem manuellen Einbinden der JS-Datei in das Layout war alles in Ordnung.

EDIT: Noch ein Fehler. Oder ich bin zu blöd die Einstellung zu finden.
Vier Textelemente, nur Text. Der Slider spielt die Elemente in der falschen Reihenfolge ab. Aktuell wohl 1, 4, 3, 2.

[dhe]

Unter Contao 3.2 (Neuinstallation) läuft der npslider in Version 3.2.0 alpha 1 sauber und problemlos.
Unter 3.1.5 läuft die Version 3.0.0-alpha1 bei mir sauber.

Vll grätscht bei dir was anderes mit rein?

[Samson1964]

Das kann natürlich sein, zumindest was die Einbindung der JS-Datei betrifft.
Die Reihenfolge der Elemente wird dann aber vielleicht doch eher npslider-spezifisch sein.

[derRenner]

Hallo

habe np_slider mit composer unter 3.3.4 installiert.
- Haken bei Endlosschleife
- Haken bei Automatisch wechseln
- Überblendeffekt
- Geschwindigkeit 3000
- Pause 4000

folgendes passiert:
der Slider beginnt - macht einen Durchgang
das letzte Bild des ersten Durchganges blendet noch in das erste Bild des zweiten Durchganges
dann springt das zweite Bild des zweiten Durchganges rein (anstatt zu überblenden) und bleibt da stehen

zu sehen ist das hier:
http://staging.installateur-horn.at/

Chrome 36.0.1985.143 m
Firefox 32.0
npslider 1.0.0.9001

Kannst du dir das bitte mal ansehen und evtl. beheben? wäre prima ;-)

Danke schon mal
Bernhard

[derRenner]

Hallo dhe,

konntest du schon ein wenig Zeit finden, um dir das oben beschriebene Problem anzusehen?
Wäre prima ... DANKE!

[ways2web]

vielleicht hab ich nach nur 2 minuten die erweiterung noch längst nicht verstanden.. an welchem Punkt ist die repsonsive? das ausgangsscript klar..
aber hat der slider nicht fixe abmessungen als zwang?

anmerkungen:

1. unter 3.2.14 speichert er die Einstellungen von prev/back button-bilder nicht
2. wenn man wie viele seine scripte (jQuery usw) am ende des bodys läd geht der slider nicht
3. beim überblendeffekt verschiwnden die bilder nicht, geht nur bei texten
4. irgendwann kommt jQuery.browser is undefined, wenn überblendeffekt zwischen text und bildern wechseln stattfindet

usw.

[dhe]

Hey, ich versuch am Wochenende nach den Problemen zu schauen.

@ways2web: slider braucht keine fixen Abmessungen. Du musst die Größeneinstellung auf automatisch stellen. Dann richtet sich der Slider am Eltern element aus. Musst halt darauf achten, dass die einzelnen slider Elemente keine Höhen- und Breitenangaben haben

[ways2web]

ich muss sowas von blind sein.. helft ihr nem blinden ?

[dhe]

Hm, ich fürchte, du hast eine veraltete Version des npsliders.
Eigentlich sollte das so aussehen.
npslider3.png

[ways2web]

Ok,das erklärt vieles oder gar alles, ich hab mir das über Composer geladen.

gesendet mit Tapatalk.

[swinde]

Hallo

der Slider läuft mit der Contao Version 3.4 einwandfrei!

VG Steffen Winde

[gia-online]

Hallo zusammen,

habe die aktuelle Version des Sliders auf einer 3.5.12 Installation laufen. Sieht am Desktop
und Tablet super aus ... nur am Smartphone will das Ganze nicht laufen, hier bekomme ich
ein "Standbild" es wird nur ein Bild angezeigt.

Ich nutze den Slider um eine Logo-Leiste zu betreiben, d.h. es werden immer sieben Bilder
(Logos) gezeigt und anschließend wird um eins weiter gerückt.

Könnt ihr mir hier weiter helfen?

Viele Grüße
Mirko

[dhe]

... nur am Smartphone will das Ganze nicht laufen, hier bekomme ich
ein "Standbild" es wird nur ein Bild angezeigt.

Hey, hast du ne Version online, wo man sich das anschauen kann?

[gia-online]

Hallo,

Du kannst Sir das unter www.gia-testserver.de/g2000/ anschauen, dort nutze ich den npslider
für die Logos im Footer.

Würde mich freuen wenn Du einen Lösungsvorschlag hättest.

Viele Grüße
Mirko

[dhe]

ok, schritt für schritt.

zu allererst musst du die Klasse "autogrid" bis 767px für Slider elemente in der Breite optimieren, d.h. keine width:100%

@media only screen and (max-width: 767px){
.autogrid:not(.bx-clone) {
  width: 100%!important;
}
}

probier das mal, ob dann der Slider richtig initialisiert wird

[gia-online]

So ich habe nun

@media only screen and (max-width: 767px) {
.autogrid:not(.bx-clone) {width: 100% !important;
}
}

in die styles.css kopiert aber leider funktioniert der Slider noch nicht.
Er zeigt immer das gleiche Logo ohne das der Slider startet, hier hatte ich eigentlich im Backend den "Zufallsstart" eingestellt.

Viele Grüße
Mirko

[dhe]

Deine Änderungen sind nicht drin.
Systemwartung -> Skriptcache leeren

dann sehen wir mal weiter

[gia-online]

Hallo dhe,

so nun wird das aktuelle CSS genutz und die entsprechend von Dir geannte Klasse gelesen.
Leider will sich der Slider immer noch nicht rühren :-(

Gruß
Mirko

[dhe]

Komisch,
aber es liegt irgendwie an dieser "autogrid" Geschichte und dessen Einfluss auf die Breite. Vll ist auch meine Anweisung nicht ganz richtig, weil laut Inspector wird das auch gar nicht auf alle Elemente angewandt.

Zum Debuggen würde ich mal diese ganzen Autogrid Sachen entfernen und dann testen.