Teaser Slider anpassen

Thema wurde von diana_kleczka, 13. Februar 2018 erstellt.

  1. diana_kleczka

    diana_kleczka Erfahrener Benutzer

    Registriert seit:
    24. Januar 2018
    Beiträge:
    272
    Danke erhalten:
    29
    Danke vergeben:
    76
    Hallo liebe Comunity,
    ich weiß nicht ob es nur mir so geht, aber ich finde das der Teaser Slider im Style Edit nur sehr unflexibel anpassbar ist.
    Ich wünschte mir mehr Einstellungen (Ich weiß das Leben ist kein Wunschkonzert ;-)).
    Ich würde gerne die Höhe verändern so das er nicht mehr direkt am Header klebt, die Pfeile links und rechts deaktivieren oder diese der Größe der Bilder anpassen.
    Ich weiß das dieses mit CSS möglich ist, ich aber der totale CSS Noob bin.
    Wäre es evtl. möglich mir einen kurzen Crash Kurs zu geben wie ich oben genannte Änderungen durchführen kann, oder verlange ich da zuviel?
    Ich wäre über Tips sehr dankbar!
     
  2. Anonymous

    Anonymous Mitglied

    Registriert seit:
    12. August 2017
    Beiträge:
    20
    Danke erhalten:
    9
    Danke vergeben:
    4
    Da hast du recht. Man kann keinen Text integrieren, die blöden Punkte sind mitten im Bild. Ich bastel da selber gerade, damit die in einer grauen Leiste UNTER dem slider sind wo sie auch hingehören, aber auch die Pfeile verschieben sich dann. Furchbar!
    gifs oder png´s sind gar nicht möglich, weil die Bilder übereinander "gestapelt" sind und von jedem dann etwas zu sehen ist. Die müssten mit einem visibility:hidden deaktiviert werden.
    Trau mich da schon gar nicht mehr ran, weil einfach zu viel zu ändern ist.
    was aber deinen Abstand betrifft:

    Code:
    #stage {
        margin-top: 50px;
    }
    DIe Pixel musst halt etwas anpassen.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Bitteschön.

    (Link nur für registrierte Nutzer sichtbar.)

    oder hier.

    (Link nur für registrierte Nutzer sichtbar.)
     
  4. diana_kleczka

    diana_kleczka Erfahrener Benutzer

    Registriert seit:
    24. Januar 2018
    Beiträge:
    272
    Danke erhalten:
    29
    Danke vergeben:
    76
    Vielen Dank für eure Antworten.
     
  5. Anonymous

    Anonymous Mitglied

    Registriert seit:
    12. August 2017
    Beiträge:
    20
    Danke erhalten:
    9
    Danke vergeben:
    4
    #5 Anonymous, 15. Februar 2018
    Zuletzt bearbeitet: 15. Februar 2018
    Ich hab mich gerade mal hingesetzt und das ganze ein wenig "optimiert".
    Allerdings ist dieses CSS auf meine Bedürfnisse angepasst - was heisst:
    Ich setze durchscheinende PNG Dateien ein, die hier ohne weiteres nicht einsetzbar sind. Bei transparentem Hintergrund liegen diese alle übereinander und wären damit unbrauchbar.
    Folgende CSS setzt den Hintergrund auf Durchscheinend, deaktiviert alle anderen Bilder und aktiviert nun nur das aktive Bild - wodurch das erreicht wird, was der Slider bei mir machen soll - nämlich sich an das Gesamtbild einfügen ;)

    Dann hab ich diese bescheuert programmierte Punkteleiste mitten im Bild nach unten ausgelagert (wer kommt denn bitte auf die Idee eh schon kaum sichtbare "Buttons" mitten ins Bild zu legen???.

    Hier nun der code:

    Code:
    /* Slider */
    #stage .swiper-slide{visibility:hidden;}
    #stage .swiper-slide-active{visibility:visible;background-color:transparent;}
    #stage .swiper-container{padding-bottom:30px;}
    #stage .swiper-container-horizontal > .swiper-pagination-bullets{bottom:-20px;background-color:rgba(75,75,75,0.5);}
    
    Ob das nun Auswirkungen auf andere Funktionen hat (z.B. kleine Bilder), muss jeder ausprobieren.
    Bei mir geht jedenfalls Augenscheinlich alles.

    Die Pfeile schau ich mir morgen mal an, die möchte ich in einer ganz leicht helleren Farbe haben wie im styleEditor.
    Muss um 5 wieder raus ;)
     
  6. Anonymous

    Anonymous Mitglied

    Registriert seit:
    12. August 2017
    Beiträge:
    20
    Danke erhalten:
    9
    Danke vergeben:
    4
    Kann alles noch optimiert werden - aber vorerst sieht das Gesamtbild schon besser aus .. .
    Hab doch noch schnell die Buttons geändert:

    Code:
    #stage .swiper-button-prev {left:-10px;background:rgba(25,25,25,0.5);top:40%;}
    #stage .swiper-button-next {right:-10px;background:rgba(25,25,25,0.5);top:40%;}
    Zuerst habe ich den Hintergrund angepasst, damit man die Pfeile einfach besser sieht.
    Die etwas überbreiten Container habe ich um 10 Pixel aus dem Rand gezogen um sie zu kürzen (könnte man auch mit width lösen, dann muss man aber die Pfeilposition noch anpassen, dann also lieber so)
    Das dritte hat mich auch gestört, dass die Pfeile nicht wirklich mittig waren.
    Gambio hat die so angelegt, dass die bei 50% BEGINNEN - also 50% zzgl. die Höhe - und das versetzt alles.
    Setzt man die Buttons auf 40% liegen diese dann doch recht in der mitte. Für Feinarbeiten ist mir das jetzt aber zu spät. Testet mal mit 45%, dann ist das vielleicht noch etwas genauer ;)

    Gute Nacht nun!
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Ich stelle mir die Frage, warum man die Sliderbilder als (halb-)transparente PNGs und nicht als normale JPG macht. Die JPGs hätten auch eine geringere Dateigröße und wären ladefreundlicher.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Januar 2015
    Beiträge:
    856
    Danke erhalten:
    95
    Danke vergeben:
    124
    Schön das Du ohne etwas gesehen zu haben gleich auf die Grösse und Ladefreundlichkeit schliessen kannst.

    Zum einen haben die Bilder gerade mal 250kb mit 1920Pixel, zum anderen steht da nicht einfach nur ein Klotz im Raum der sich bewegt. Viele Slider die ich in Shops so sehe empfinde ich eher als Fremdkörper - ganz besonders wenn man - wie hier der Fall - ein Hintergrundbild verwendet.
    Wenn ich so in andere slider schaue die ab 500kb aufwärts pro Bild den Shop schmücken ...
    Die wenigsten sind heute noch mit Analogmodem oder ISDN im Internet. Bei uns im Landkreis gibt es nicht mehr viele Haushalte bei denen absolut kein DSL möglich ist. Und die sind das warten schon gewohnt ;)
    Ich sehe das völlig entspannt. Man muss die Bilder nur entsprechend anpassen.

    Du darfst gerne JPG verwenden - und kannst Dir den obigen Code zum Teil sparen. Kann jeder machen wie er will ....

    LG: Tammy
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Dazu brauche ich die Bilder nicht zusehen. Ich weiß selbst, dass transparente PNGs weitaus größer sind als JPGs mit Hintergrund. Wenn man einen dunklen Shop hat kommt man nicht umhin, die weißen Hintergründe zu entfernen und mit freigestellten PNGs zu arbeiten.
    Da helfen an einigen Stellen Tools wie tinypng zwar weiter, kommen aber manchmal - zB bei RGB Produkten - an ihre Grenzen.

    Wo kann man sich die 250kb und 1920px großen PNGs denn mal anschauen?
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Januar 2015
    Beiträge:
    856
    Danke erhalten:
    95
    Danke vergeben:
    124
    Wenn ich den Shop fertig habe stelle ich ihn hier ein zum Check. Wird nur leider noch etwas dauern, da sie keine Zeit hat die Artikel einzugeben. Ich kann Dir aber gerne per Email (bitte dann per PN anfragen) ein paar Bilder zukommen lassen.
    Allerdings handelt es sich hier noch um "Dummys", echter Inhalt muss noch bearbeitet werden );

    Mal sehen ob ich eins davon hier anhängen kann...

    LG: Tammy
     

    Anhänge:

  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    #11 Anonymous, 3. März 2018
    Zuletzt bearbeitet: 3. März 2018
    PN
     
  12. Wer einen richtig guten Teaser Slider möchte der kann auch einen vom Internet nehmen :)
    Der von Gambio ist eben ein Standard, wer Extras möchte der sollte doch lieber einen anderen nehmen.

    Hier mal ein Link
    http://wowslider.com/de/
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Januar 2015
    Beiträge:
    856
    Danke erhalten:
    95
    Danke vergeben:
    124
  14. artep

    artep Aktives Mitglied

    Registriert seit:
    23. Dezember 2018
    Beiträge:
    26
    Danke erhalten:
    1
    Danke vergeben:
    3
    Hallo Petra,
    danke dafür:
     
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Wobei an dieser Stelle noch immer darauf hinzuweisen ist, dass der WOWSLIDER für kommerzielle Zwecke NICHT KOSTENLOS ist.

    Das wird auch nicht legaler, wenn man an den Dateien herummanipuliert und Hinweise entfernt. Das schafft dann eher eine strafrechtliche Relevanz nicht unerheblichen Ausmaßes.
     
  16. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Februar 2015
    Beiträge:
    1.291
    Danke erhalten:
    398
    Danke vergeben:
    237
    Gibt es hier Leute die den WOW-Slider im Einsatz haben? Wie sind da die Erfahrungen bezüglich Einbau und Updatefestigkeit?
    Kann man den gefahrlos einbauen oder schafft man sich damit eine potentielle Problemquelle?