[npslider] Ein responsive jQuery Slider für Inhaltselemente

[dhe]

Muß ich dazu "Eigener Container für Steuerungselemente vergeben" verwenden
und dann mittels eigenem CSS positionieren?

Richtig, über absolute Positionierung. Die Container sollten auch eine feste Breite und Höhe haben, da sonst der IE < 9 nicht richtig mitspielt.

Und wie lassen sich beim Pager Punkte einfügen statt der Zahlen?

Ich geb dir mal ein Beispiel, das ich oft verwende.

/* PAGINATION SLIDER */
.ce_npslider .bx-pager {
	text-align:center;
	margin-top:10px;
}
	.ce_npslider .bx-pager .pager-link {
		display:inline-block;
		height:10px;
		width:10px;
		background:url(/path/to/image.png) no-repeat 0px 0px;
		text-indent:-9999em;
	}
		
	body.ie7 .ce_npslider .bx-pager .pager-link {
		display:inline;
		zoom:1;	
	}
	.ce_npslider .bx-pager .pager-link + .pager-link {
		margin-left:8px;
	}
	.ce_npslider .bx-pager .pager-active {
		background-position:-10px 0;	
	}

Gruß

[iainmacnab]

Wir haben sämtliche Optionen versucht, aber np_slider läuft immer in loop. Endlosschleife ist nicht angeklickt. Danke im Voraus

[dhe]

Wir haben sämtliche Optionen versucht, aber np_slider läuft immer in loop. Endlosschleife ist nicht angeklickt. Danke im Voraus

Hm, kann den Fehler leider nicht reproduzieren, habe gerade eben nochmal alles probiert.
Habt ihr vielleicht an den Templates rumgebastelt?
Welche Contao Version?
Welche npslider Version?

Habt ihr eine Online-Demo?

[iainmacnab]

Contao 3.0.5.
np slider 1.0.0. stabil; Neuste aus der Erweiterungsverwaltung
Wir haben die Templates nicht angefasst.
Inzwischen leider deinstalliert.
Wir werden aber demnächst nochmals probieren.

[dhe]

Hallo Leute,
habe gestern abend die Version 3.0.0 alpha1 ins ER hochgeladen.

Viel Spaß damit und unbedingt testen.

Gruß

[kischd]

Hallo dhe,

hab heute das Update gemacht. Leider steht bei mir der Slider und die Elemente sind untereinander positioniert.
Muss ich noch etwas beachten?

[dhe]

Hallo dhe,

hab heute das Update gemacht. Leider steht bei mir der Slider und die Elemente sind untereinander positioniert.
Muss ich noch etwas beachten?

jQuery im Seitenlayout aktiviert?
Schau mal mit dem Firebug in die Konsole rein, steht das vielleicht eine Fehlermeldung?

Gruß

PS: habe kurz ein paar Fixes zur AutoStart Animation hochgeladen

[derRenner]

Hallo dhe,

wollte heute die letzte Version des npSliders in einer neuen Installation installiert (via Erweiterungskatalog) -
3.0.0 alpha1 build 11 in einer Contao 3.0.6

leider fehlt bei mir der 'Speichern'-Button ... sowohl in Chrome als auch im Firefox - somit denke ich, dass es sich um einen Erweiterungsfehler handelt

npslider_new.jpg

[dhe]

leider fehlt bei mir der 'Speichern'-Button ... sowohl in Chrome als auch im Firefox - somit denke ich, dass es sich um einen Erweiterungsfehler handelt

Danke für den Hinweis. Ist ein halber Fehler Hatte in den Sprachdateien vergessen, bei einem Eintrag HTML Zeichen in Entities umzuwandeln.

Mit der Build 12 müsste wieder alles gehen, am besten den Systemcache vorherleeren.

[derRenner]

Hallo dhe,

habe hier wieder ein Verhalten, das so nicht sein sollte.
Ab und an - ich konnte (noch) nicht feststellen wann dies auftritt - wird nach dem Aktualisieren der Seite nicht der gewünschte Slide #1, sondern der letzte (das letzte Bild, das zwischen Anfang und Ende des Wrapper eingefügt ist) Slide angezeigt.

folgende Einstellungen:
Haken bei Endlosschleife
Animation links <> rechts
Geschwindigkeit 1000
Beginnen mit Slide #1
Automatisch wechseln ist NICHT angehakt
Zufallsstart ist NICHT angehakt
Die Steuerelemente sind eingeblendet und mit eigenen Grafiken versehen

Es sind gesamt 7 Inhaltselemente 'Bild' zum Sliden - wobei das gleiche Verhalten auch mit nur 3 Bildern auftaucht.

Browser Google Chrome in der letzten Version, im FF konnte ich das noch nicht feststellen - wobei das Verhalten ja auch nicht immer auftaucht ...
npSlider 3.0.0 alpha1 Build 12
Contao 3.0.6


Grüsse
Bernhard

[dhe]

Puh,
das ist natürlich schwer, einen Fehler zu debuggen, der nicht konsistent ist.
Wobei ich auch sagen muss, dass der Chrome zur Zeit echt Macken hat (vor allem der mobile)

Ich kann da jetzt auch nur sagen, beobachten. Bei mir funktioniert zur Zeit alles

Ich weiß, ist grad leider nicht zufriedenstellend, kann aber gerade leider nichts machen...

Gruß

[vangelis]

Hallo,

ich habe ein kleinen Bug entdeckt:
Wenn Touch aktiviert ist aber keine Zahl in der Sensitivity eingegeben ist dann funktioniert der Script nicht.

Viele Grüße

[dhe]

Wenn Touch aktiviert ist aber keine Zahl in der Sensitivity eingegeben ist dann funktioniert der Script nicht.

Müsste in der Build 14 behoben sein.
Ist jetzt ein Pflichtfeld, darf also nicht leer sein

Bitte alle fleißig weitertesten.

Gruß

[kischd]

Kann ich dem Artikel irgendwie sagen, dass er nicht umbrechen soll?

Grundlegendes:
Ich habe dem Slider ein hintegrundbild vergeben. Dieses wird auch skaliert, wenn ich den Browserrahmen verkleinere.

Als Slide-Elemente habe ich "Bild + Text" angelegt. links Bild rechts daneben Text.

Wenn ich nun den Rahmen zuziehe, beginnt die Hintergrundgrafik des Sliders sich schon prozentual zu verkleiner, doch der Text umbricht nur und steht dann unter dem Bild.
Erst dann wird das Bild kleiner. So ist aber Bild und Text größer als die Hintergrundgrafik des Sliders.

Kann ich das irgendwie verhindern?

[dhe]

Schriftgröße in Prozent angeben?

Aber macht das Sinn?
Dann haste auf Smartphones eine winzig kleine Schrift...

[kischd]

Leider war das nicht das gewünschte Ergebnis.
Das Problem ist dass er der Slider sein übergeordnetes DIV von der Größe übersteigt. Und Bild und Text erst untereinander stellt bevor er es skaliert.
Vielleicht hab ich auch nur die Möglichkeit jeden Slide als Bild abzulegen....

[derRenner]

Hallo dhe!

ich habe demnächst 2 Projekte umzusetzen - in beiden sollte der npSlider verwendet werden.
Sinnvollerweise würde ich sogleich eine Contao 3.1 installieren - aber nun meine Frage dazu: kannst du abschätzen, ob bzw. bis wann der npSlider für Contao 3.1 läuft bzw. laufen wird?
Ich weiss, dass er mit 3.0.6 gut läuft - falls er für 3.1 noch nicht funzt, dann installier ich eben nochmals eine 3.0.6 ...

Danke schon mal für deine Info
Grüsse
Bernhard

[dhe]

Hi,
also ich habe ihn jetzt mal auf der 3.1 installiert und scheint genau so zu laufen wie auf der 3.0.6 ... von daher sehe ich keine Bedenken.

[derRenner]

Hallo dhe,

hab hier ein seltsames Verhalten, beim Aktivieren der Steuerelemente - kann aber nicht sagen, ob das ein Bug seitens npSlider ist, oder seitens Contao 3.1.0

Nach der Auswahl der Grafiken zu "Grafik für 'weiter'" bzw. "Grafik für 'zurück'" steht da dann nicht mehr der Pfad zum Bild, sondern es wird das Bild selbst angezeigt ...
Ist ja weiters nicht schlimm, aber in diesem Fall (und evtl. auch vielen anderen Fällen) überdeckt das Bild das nächste Kontrollkästchen => "Eigener Container für Steuerelemente vergeben" und auch das Kontrollkästchen zu "Autostart Steuerelemente einblenden"

Verhalten habe ich in den Browsern Chrome (aktuelle Version) und Firefox (aktuelle Version)

hier mal das Bild dazu, wie das aussieht
npslider.jpg

ich hab mir jetzt mal damit geholfen, dass ich das IMG via Entwicklertool auf display:none; gesetzt hab - damit habe ich zumindest mal Zugang zu den Kontrollkästchen

Aber vielleicht kann man sich das bei Gelegenheit mal angucken ...

Contao 3.1.0
npslider 3.0.0 alpha 1 build 16

Grüsse
Bernhard

[dhe]

Urgs, das geht natürlich gar nicht.
Das ist kein Contao Fehler, da funktioniert wohl das CSS nicht

Ich schau mal, wie man da beheben kann.

Gruß

[derRenner]

Hallo @dhe,

und nochmals ich ...
komme mit dem folgenden Projekt nicht weiter
http://malerei-schmid.at/cms/
der Slider soll so konzepiert sein, dass der linke Slide noch ansatzweise zu sehen ist => passt
der zentrierte Slide komplett zu sehen ist => passt
der rechte Slide wieder nur ansatzweise zu sehen ist => passt auch
ABER: die Gesamtbreite des Slides beträgt hier 1290% und das erzeugt unten einen Scrollbalken, den ich so nicht haben möchte!
Verursacht wird dieser wohl durch diesen Eintrag:

.bx-window { overflow:visible !important; }

klickt man diese CSS-Anweisung weg, ist der Bildschirm wohl wieder "normal" breit, ohne Scrollbalken, ABER der linke und der rechte Slide ist nicht mehr sichtbar und das soll so nicht sein.

Ich hatte dieses Projekt bereits mal mit einer Testinstallation und einer älteren Version vom npslider am Laufen, da hatte ich diese Problem nicht (leider kann ich die Version nicht auslesen, weil ich in der Testumgebung die Erweiterung manuel installieren musste - wenn du mir aber sagen kannst, in welcher Datei ich nachgucken kann, dann könnt ich dir die funktionierende Version auch mitteilen)

Meine BE Einstellungen:
Slider Breite 960px
Endlosschleife - links <> rechts
Beginnen mit Slide #1
Bühnenverhalten
Minimale Anzahl 1
Maximale Anzahl 3
Anzahl bewegte Slide 1
Breite eines Slide 0

An den BE-Schrauben hatte ich auch schon gedreht - also ich denke, dass ich schon so ziemlich alle Konstellationen durch habe, die man so einstellen kann.

Hast du eine Idee, wo man die Breite "begrenzen" kann, sodass eben bei der jetzigen Installation KEIN Scrollbalken unten erscheint und links und rechts trotzdem die Bilder sichtbar sind?

Grüsse
Bernhard

[dhe]

Zumindest den Backend Bug mit den Bilder konnte ich schon mal beheben.
Build 17 ist im ER verfügbar.

Zu dem anderen... da ist natürlich ein extremer Anpassungsfall, da muss ich erst mal schauen, ob das mit dem Slider abgedeckt werden kann, oder ob du da doch eigene CSS regeln einfügen musst.

Gruß

[derRenner]

Zumindest den Backend Bug mit den Bilder konnte ich schon mal beheben.
Build 17 ist im ER verfügbar.

Hallo & DANKE!
nein, leider ist da was schief gelaufen bei der Aktualisierung deiner Erweiterung!
Das Update hat funktioniert - anschliessend konnte ich den Artikel mit dem Slider nicht mehr aufrufen (Error 500)
Jetzt nachdem ich einen neuen Artikel angelegt habe, erscheinen die Bilder noch immer - hat sich zum vorigen Build also nichts getan ...
Der Button 'Speichern und Schliessen' funzt nun auch nicht mehr - 'Speichern und Zurück' funzt, aber danach kann ich auch den Artikel wieder nicht zugreifen!

Zu dem anderen... da ist natürlich ein extremer Anpassungsfall, da muss ich erst mal schauen, ob das mit dem Slider abgedeckt werden kann, oder ob du da doch eigene CSS regeln einfügen musst.

Also, wenn ich via CSS selbst was basteln muss, ist das kein Problem - ich weiss nur leider nicht an welchem Rädchen ich drehen soll


Muss dann für heute mal Schluss machen - bin dann morgen wieder zum Testen da ...

[derRenner]

@dhe, DANKE mal für die neuen Updates! Hab diese jetzt mal aktualisiert und jetzt sieht das BE ganz OK aus! Die Dateien für die Grafiken 'weiter' und 'zurück' sind sichtbar, aber sie überdecken nichts - klappt also. 'Speichern und Zurück' klappt ebenfalls wieder und die Artikel sind wieder bearbeitbar ... Soweit also alles im Lot

So, nun aber nochmals zum Slider selbst - hab den jetzt wieder eingesetzt ... kannst also wieder online "mitgucken".
Ich habe so das Gefühl, als würde das Bühnenverhalten nicht das machen, was es soll - denn egal, welche Einstellungen ich mache, irgendwie reagiert das Ergebnis immer gleich. Mag ja sein, dass ich die Einstellung nicht korrekt verstanden habe ? Bühnenverhalten heisst für mich, dass mehrere SliderElemente gleichzeitig sichtbar sein können, oder? Und das macht der npSlider aber nicht so wirklich.

Vllt. kannst du mir hier ein wenig unter die Arme greifen, denn vllt. scheitert's ja nur an meinen BE-Einstellungen zum Bühnenverhalten. CSS dazu soll dann kein Problem sein - ich denke, dass ich das dann schon schrauben werd

[derRenner]

jetzt ist mir noch etwas aufgefallen:
Wenn ich den Haken bei 'Automatisch wechseln' setze, dann passiert auch nichts - eigentlich sollte der Slider ja die Bilder dann selbst wechseln ... tut er aber nicht, er bleibt stehen

[guidos]

jetzt ist mir noch etwas aufgefallen:
Wenn ich den Haken bei 'Automatisch wechseln' setze, dann passiert auch nichts - eigentlich sollte der Slider ja die Bilder dann selbst wechseln ... tut er aber nicht, er bleibt stehen

Funktioniert bei mir leider auch nicht! (Contao 3.1)

Swipe geht, Ticker auch, nur beim automatischen Wechsel geht es nicht, habe schon alle Einstellungsmöglichkeiten durchprobiert.

Gruss Guido

[dhe]

Alles klar.
Ich schau es mir heute Abend einmal an

[CZander]

Hallo,

vielen Dank für die Extension. Habe sie in ein neues Projekt integriert.

Habe nur ein kleines Problem: Das Anklicken von "automatisch Wechseln" startet den Slider nicht.

Beste Grüße

[dhe]

So ihr Nörgler
Das müsste jetzt passen

Gruß

[derRenner]

Hallo @dhe,

DANKE für das neue Update! Jetzt slidet das Teil wieder
Aber, die Sache mit den sichtbaren Slides ist mir noch nicht ganz klar. Hast du vielleicht die Möglichkeit mir/uns noch mitzuteilen, was die Einstellungen im 'Bühnenverhalten' bewirken (sollen)? Denn irgendwie raff ich das nicht, weil sich eben nix ändert, wenn ich Einstellungen abändere ...

Mein Ziel (hat in früheren Versionen auch gefunzt):
ein Slider über die komplette Bildschirmbreite, wobei die eingestellte Sliderbreite 960px beträgt
die Bilder sind jeweils 960px breit
ein sichtbares Bild mittig zentriert (was durch die CSS Einstellungen ja auch prima klappt)
links ausserhalb des mittleren Bildes soll der restliche Teil des letzten Bildes gezeigt werden
rechts ausserhalb des mittleren Bildes soll der erste Teil des nächsten Bildes gezeigt werden.

Welche Einstellungen im Bühnenverhalten müsste ich hier setzen? Denn, wie vermerkt, keine Einstellung greift ...

Danke & Gruss
einer der Nörgler

[dhe]

Ist ehrlich gesagt wirklich nicht sehr einfach, ich muss da auch jedes Mal überlegen, bzw. rumprobieren.

Aber ich hab es hinbekommen:

1. Dimensionenverhalten: Manuell
2. Breite: 960px ; Höhe: deine gewünschte Höhe
3. Bühnenverhalten aktivieren
4. Minimale Anzahl sichtbarer Slides: 1
5. Maximale Anzahl sichtbarer Slides: 3
6. Anzahl der zu bewegenden Slides: 1
7. Breite eines Slides: 960
8. Dann musst noch CSS einfügen: .ce_nps {margin-left:auto; margin-right:auto} .bx-viewport {overflow:visible !important;}

Mehr Infos gibt es auf der Seite des Programmierers des Sliders, zu den einzelnen Anwendungen auch Beispiele:
http://bxslider.com/examples/carouse...-number-slides
http://bxslider.com/examples/carouse...-number-slides

[derRenner]

Hallo,

DANKE mal! Da lag ich ja gar nicht daneben mit meinen Einstellungen - bis auf die Breite des Slides, habe ich auch genau diese Einstellungen ... Auch das CSS habe ich so gewählt - und wie du in meinen Posts oben schon sehen kannst, bringt die CSS-Anweisung .bx-viewport {overflow:visible !important;} genau den unerwünschten Effekt, dass unten eine horizontaler Scrollbalken erzeugt wird. Nimm diese Anweisung mal weg, dann ist wohl der Scrollbalken kürzer (aber nicht weg) und das Bild links ist auch weg.

Ich bin schon voll am Verzweifeln, weil ich nicht mehr weiss, wie ich das "sichtbare" Feld (3 Slider) so begrenzen kann, dass eben kein Scrollbalken erzeugt wird. Noch dazu, weil ich weiss, dass es in einer alten Version funktioniert hat

Ich lass jetzt mal die Einstellungen und das CSS so, damit du einerseits siehst, was ich meine und andererseits evtl. mal in deinem Script nachgucken kannst, ob da was angepasst werden kann, damit genau dieser Effekt nicht auftritt - ich denke, dass ich nicht der einzige bin, der das Problem beim Bühnenverhalten hat ...

Hier nochmals der Link zur Seite
http://www.malerei-schmid.at/cms/

Wäre super, wenn du was zu Stande bringen könntest ...
Bin schon am Überlegen, ob ich eine alte Version vom npSlider einbauen soll, der da funktioniert hat - bringt aber insofern nichts, weil das Problem ja grundsätzlich bestehen bleibt ...

[dhe]

Hm, ok, mein Fehler. auf dem Mac werden Scrollbalken ausgeblendet, wenn nicht verwendet.
Es ist aber ganz einfach: gib mal deinem #header {overflow:hidden}
Das war's.

Gruß

[derRenner]

Alle Daumen hoch!! Ein riesengrosses DANKESCHÖN!!
Daran hätte ich wohl niiiieeee gedacht ... Klappt einwandfrei - und dazu gelernt hab ich auch wieder!

Grüsse
Bernhard

[dhe]

Die "Zurück" und "Weiter" Grafiken werden jetzt je nach gewähltem Ausgabeformat richtig erstellt.

[Nalnig]

Hallo,

vorweg schon mal danke für den tollen Slider!
Nur bringe ich die Option "Eigenen Pager verwenden" einfach nicht zum laufen.
Wenn ich im dazugehörigen Eingabefenster "#myPager" eingebe bekomme ich im Frontend in der Entwickler Konsole den Fehler:
"Uncaught Error: Syntax error, unrecognized expression: &#35;myPager " und mein nach der Vorlage erstellter Pager hat keine Funktion für den Slider
Sonstige Steuerelemente wie "vor" und "zurück" Button werden auch nicht mehr angezeigt.
Ob das nur Unvermögen von meiner Seite oder ein Fehler im Slider ist kann ich leider nicht sagen.

ich verwende npslider "3.0.0 alpha1 build 22" mit contao "3.0.6"

Nun wär ich für Hilfe sehr dankbar


Grüße

[dhe]

Dafür ist ja eine alpha Version da

Problem war, dass das "#" in ein Entity umgewandelt wurde, das hat den Slider aus dem Tritt gebracht.
Ist mit der Build 23 behoben.

Jetzt wie funktioniert das mit den Eingabefeldern:

• Standardmäßig wird der Pager in den div Container "bx-viewport" gepackt
• Wenn man in "Anderen Pager Bereich wählen" etwas einträgt, versucht das Script, den Pager in diesen Container zu integrieren. Dazu muss das <div> natürlich auch irgendwie in der Seite existieren. Beispiel: du trägst #pagerNew ein, dann kannst du z.B. ein neues Inhaltselement vom Typ "HTML" VOR dem Slider erstellen und <div id="pagerNew"></div> eintragen. Schon ist der Pager überhalb vom Slider.
• "Eigenen Pager verwenden": Ist wie das Achtung Zeichen symbolisiert mit Vorsicht zu genießen. Diese Funktion gibt, falls man seinen Pager komplett anders aufbauen möchte. Dazu ist aber ein grundlegendes Verständnis von HTML nötig. Wie dein HTML aussehen muss, siehst du, wenn auf das Achtung Zeichen klickst.

[Nalnig]

Ha, das ist mal Support!

Am nächsten Tag gleich nen Fix, besser geht es ja gar nicht!
Vielen dank, es geht jetzt alles genau so wie ich mir das vorgestellt habe.


Nochmals danke für ein tolles Modul!


Grüße

[Kasey]

Ich habe den npslider installiert und finde ihn wirklich toll. Ich habe ihn unter Xampp problemlos genutzt. Nun habe ich die Site (www.svpk-aargau.ch) ohnline gestellt und leider zeigt er jetzt nur noch das erste Bild und immer wieder das. Woran könnte das liegen? Schon mal danke für die Hilfe.

[dhe]

Oh, da lief wohl was schief.

So wie es aussieht, hast du den Contao 3.1 Content Slider um den npslider drum herum gepackt.
Das geht natürlich nicht
Du hast sozusagen einen Slider im Slider.

Damit der npslider richtig funktioniert, musst du folgende Struktur einhalten:

• ### npslider Wrapper START ###
• Inhalte
• ### npslider Wrapper END ###