Responsive Slider

[drapper]

Hallo,

ich möchte den Slider Responsive verwenden und komme da mal wieder nicht weiter...

Was ich möchte:
-Slider welcher eine maximal Größe im Desktop Modus hat, 800*400px
-keine Vor und Zurück Navi Elemente
-Paginatoren unten rechts.
-Wenn man den Browser kleiner zieht soll sich der Slider mitsamt Inhalt verkleinern. also z.B. dann 400*200px
Die Paginatoren sollen immer unten zentriert bleiben

Folgende Einstellungen des Karusells habe ich gerade:
-keine Größen angewählt
-keine Elementgrößen angewählt
-Haken bei Responsive

Ich hab jetzt folgendes per CSS versucht:

.ce_caroufredsel {
    max-width: 800px !important;
    max-height: 400px !important;
    width:100%;
    height:100%;
}
.caroufredsel_prev,
.caroufredsel_next {
    display:none !important;
}

.caroufredsel_pagi {
    margin:0 0 0 46%; //Wie zentiert man das richtig? Das hier kann ja keine Wirkliche Lösung sein? Ich muss dann jedesmal ewig ausprobieren...
    float:left;
}
.caroufredsel_pagi a {
    float:left;
    display:block;    
    width:15px;
    height:15px;
    margin:0 0 0 5px;
    background-color:#fff;
}

Jetzt habe ich folgende Probleme:
Die Paginatoren verschwinden bei machen Slides (rutschen nach unten). Obwohl ich max-height:400 angegeben habe wird das anscheinend doch größer.
Bei Firebug steh manchmal eine width von dem carosell wrapper von 4000px oder so...?!

Der Slider samt Content verhält sich nicht responsive sondern bleibt einfach wie er ist.

Was mache ich falsch?
Vielen dank für Hilfe!
gruß

[Dirch]

Hallo hallo,

schau dir am besten mal die Beispiele auf seiner HP zu responsive an (http://caroufredsel.dev7studios.com/...-carousels.php). Soweit ich das verstanden habe ist es wichtig bei responsive die Anzahl an sichtbaren Elementen anzugeben, da er sonst keine Berechnungsgrundlage hat. Also 1, 2 oder einen Wert für min/max festlegen. Dann sollte es gehen.

Daß bei einem DIV (caroufredsel) die Breite so "extrem" ist liegt an der Gesamtbreite des Karussells über alle Elemente. Der Wrapper (caroufredsel_wrapper) wird von dem Javascript dort drumherum gesetzt und hat als Stil entsprechend einen overflow:hidden. Diese Daten setzt alle das Script.

Bzgl. der immer zentrierten Pagination kann ich dir leider nicht helfen. So gut bin ich nicht in CSS bewandert. Ich hab hier immer absolut positioniert (was bei responsive so eher nicht praktikabel ist). Evtl. stört bei dir das clearfix-DIV. Du kannst das Template auch kopieren und alles rauswerfen was du nicht brauchst - also z.B. auch die Navigation bzw. die Struktur anders setzen. Aber ich suche auch noch danach wie man die Pagination immer zentriert bekommt. Vielleicht meldet sich hier ein CSS-Profi noch zu Wort.

Grüße...
...Dirk

[Dirch]

Die zentrierte Pagination bekommst du so hin:

.caroufredsel_pagi {
    margin-left: auto;
    margin-right: auto;
    position: relative;
} 

[rockpianist]

Ich war der Meinung, dass sich der Slider automatisch der verfügbaren Größe anpasst, das wäre für mobile Webseiten hilfreich.
Hier sollen noch einige Projekte von mir entstehen.
Das funktioniert bei mir nicht, auch nicht nach Verwendung des angegebenen css-Codes:

.caroufredsel_pagi {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

Ist eine Skalierung überhaupt möglich, wenn ja wie?
Dies ist meine Testseite: http://contao3.partyband-livemusik.de/.
Hier sieht man, wenn man die Seite stark zusammenschiebt, dass der linke Slider nicht skaliert. Es wird die rechte Bildseite abgeschnitten.
Danke rockpianist

[Dirch]

Ist eine Skalierung überhaupt möglich, wenn ja wie?
Dies ist meine Testseite: http://contao3.partyband-livemusik.de/.
Hier sieht man, wenn man die Seite stark zusammenschiebt, dass der linke Slider nicht skaliert. Es wird die rechte Bildseite abgeschnitten.
Danke rockpianist

ja klar ist das möglich. Du mußt dazu den Modus auf "responsive" umstellen in der Slider-Konfiguration. Dann stellst du noch die Karussell-Höhe auf "variabel" ein und das war's eigentlich schon.

Schönes Beispiel: http://www.ck2013.think-contao.de/im...onen-2013.html

Bei mir ist der Slider auf deiner Seite in der linke Spalte. Wenn man die Seite klein schiebt, dann rutscht diese Spalte wegen des Holy-Grails darunter. Der Slider ist dort aber nach wie vor sichtbar und schneidet bei mir auch nichts ab.

[rockpianist]

Danke, das funktioniert super!
rp

[rockpianist]

Auf dem localhost hat es super funktioniert. Ich habe dann die beiden Änderungen im Internet vorgenommen. Als das nicht funktionierte, die komplette Verzeichnisstruktur mit ftp hochgeladen, die Datenbank exportiert, importiert und eingebunden.
Es will im Internet einfach nicht funktionieren.
Hat jemande eine Idee.
Danke rockpianist

[rockpianist]

Auch ein Hochladen von localhost auf einen anderen Hoster http://contao3test.avelon.de/ führte nicht zum Erfolg.
Ebenso wenig eine Deinstallation und Neuinstallation von dk_caroufredsel.
Responsive funktioniert bei mir nur auf localhost.
Gruß rockpianist

[Dirch]

Hallo hallo,

hast du einen Link wo ich mal schauen kann? Eigentlich hat das nichts mit Hosting zu tun und sollte an sich auch keinen Unterschied zwischen lokal und Hosting machen. Gehen denn andere Scripte?

[rockpianist]

Hallo Dirch,
was meinst Du mit Link zum Schauen?
Meinst Du http://contao3test.avelon.de/ (linke Spalte).
Ich habe das Akkordeon und eine Mootools Galerie.
Lokal funktioniert aber alles auch mit eingeschaltetem Mootools.
Im Internet habe ich auch mit abgeschaltetem Mootools keinen Erfolg gehabt.
Gruß rockpianist

[Dirch]

hmm was genau funktioniert denn dort nicht? Bei mir slidet er - du solltest nur im Backend wieder die Einstellungen umschalten auf "readyLoad".

[rockpianist]

Es zeigt sich folgendes Verhalten:

localhost:
Bei Einstellung auf readyLoad erscheinen alle Bilder untereinander.
Bei Einstellung auf onDocument Ready funktioniert die responsive Skalierung.

Im Internet ist das Verhalten genau umgekehrt: http://contao3test.avelon.de/
Bei Einstellung auf readyLoad wechseln die Slides wie gehabt und im Chrome wird nichts mehr abgeschnitten.
Aber die Skalierung funktioniert nicht, Beim engen Zusammenschieben der linken Spalte (auf Minimum) wird das Bild rechts abgeschnitten.
Gruß rockpianist

[Dirch]

also bei mir ist alles ok. Kann es beim besten Willen nicht nachvollziehen:

Partyband Flashdance- Livemusik für Ihre Party aus Sachsen - Dresden.jpg

[rockpianist]

Danke für Dein Interesse.
Wenn Du den Browser weiter zusammenschiebst, siehst Du das Abschneiden.
Zum Vergleich 1x localhost (nicht abgeschnitten) und 1 x im web, wenn Du man den Firefox auf Minimum (213px) zusammen schiebt.
Natürlich ist das an dieser Stelle egal, weil das niemand macht.

Ich möchte aber den Slider in anderen Projekten nutzen, dort gibt es größere Bilder, die eingezoomt werden sollen.
Wie bereits geschrieben, wurden die Daten per ftp hochgeladen und die Datenbank exportiert, importiert und eingebunden.
Danke rockpianist