REDAXO Forum

Servus miteinander,

ich bin ein Redaxo- und CSS-Einsteiger und verzweifle gerade am Slider der Demo.
Die Demo-Seite von R5 ist cool und man kann sich vieles ansehen, was machbar ist.

Der Slider wird ja responsiv bei jedem Bildschirm 100% Höhe angezeigt, somit geht der Slider über die gesamte Seite.
Ich würde nun gern den Slider nur 60% der Gerätebildschirm-Höhe definieren.

Einzige Zeile die ich gefunden habe ist in redaxo-demo.css (607) aber das ist ja nur der Overlay, der darked

Code: Alles auswählen

.slides li .overlay {
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: 2;

Desweiteen ist der Slider mit <section class="hero-slider slider-fullscreen> angegeben

Aber die Klasse slider-fullscreen ist irgendwie nirgends definiert.

Bin ich zu blind oder zu blöd?
Könnt ihr mir bitte weiterhelfen?
Danke.

Die Höhe des Sliders wird in einem JavaScript der aktuellen Fenstergröße angepasst.

Siehe JavaScript: resources/js/redaxo-demo.js

schon mal super hinweis. danke.
aber javascript, das ist ja noch komplizierter als css.

hier komm ich mit tipps und selber probieren überhaupt nicht weiter.

hier benötige ich bitte hilfe in form von "welche zeile ist womit umzuschreiben".

vielen lieben dank.

hi,

ich denke, das sind diese zeilen 65 - 68

Code: Alles auswählen

 // SlideHoehe fuer .slider-fullscreen anpassen
    $('.slider-fullscreen .slides li').each(function () {
       $(this).css('height', $(window).height());
    });

das müsstest Du entsprechend anpassen; versuch mal folgendes:

Code: Alles auswählen

$(this).css('height', ($(window).height() *  0.6));  // 60%

Ach Schade, das wäre wohl auch zu einfach gewesen.

Nur die Zeile 67 zu ändern mit Deinem Vorschlag brachte leider gar nichts.

Dann viel mir auf, das in Zeile 102-108 auch nochmal so etwas steht. dort hab ich das auch eingefügt.

Nun wird zwar das Bild auf 60% Höhe verkleinert, aber den Slider haut es allgemein komplett auseinander, keine Steuerbuttons mehr da und auch alle 3 Slides werden gleichzeitig untereinander angezeigt. Mist.

Hm, also das das an dem window-höhe hängt ist doof. Besser wäre wohl, wenn man dem div 100% Höhe geben könnte und das script sich der gesamten Höhe des divs anpassen würde.

Gibt es $(div).height())?
Ne ist Quatsch wa?
Über das theoretische "könnte, müsste, sollte" komm ich hier aber nicht raus. Da fehlt es mir anh Kompetenzen.

Du könntest redaxo-demo.js wie folgt ändern

Code: Alles auswählen

jQuery(document).ready(function(){

  // heigth of slider (Fullscreen ==> 1.0)
  var mySliderHeight = 0.6;

...
  
    // SlideHoehe fuer .slider-fullscreen anpassen
    $('.slider-fullscreen .slides li').each(function () {
        $(this).css('height', $(window).height() * mySliderHeight );
    });

...

    // Die Slide-Hoehe fuer Fullscreen anpassen
    $('.slider-fullscreen .slides li').each(function () {
        $(this).css('height', $(window).height() * mySliderHeight );
    });
    $(window).resize(function () {
        $('.slider-fullscreen .slides li').each(function () {
            $(this).css('height', $(window).height() * mySliderHeight );
        });
    });

...

Das hat bei mir gut funktioniert.
Aber ich habe das nur im Firefox am PC getestet!

Dadurch sind die Texte über dem Bild halt etwas zu viel!
Wenn Du die Punkte (Navigation für die einzelnen Slide-Elemente) weiter nach unten schieben willst, dann müsstest Du das css von ".flex-control-nav" noch ändern oder überschreiben.

Ich habe auch keine Ahnung, ob durch die Höhen-Änderung evt. noch andere Seiteneffekte auftreten, wo das CSS nicht mehr passt.

Gruß,
Guido

Super spitzenklasse Guido, funktioniert perfekt.

Für den Text habe ich $(this).height() / 2 etwas angepasst und in der CSS die Schriftgrößen.
Getestet mit Chrom, Firefox, Edge und mit Safari auf ipad mini - funktioniert überall super, auch responsive.

Vielen lieben Dank.

REDAXO Forum

Höhe des Demo-Slider anpassen

Höhe des Demo-Slider anpassen

Re: Höhe des Demo-Slider anpassen

Re: Höhe des Demo-Slider anpassen

Re: Höhe des Demo-Slider anpassen

Re: Höhe des Demo-Slider anpassen

Re: Höhe des Demo-Slider anpassen

Re: Höhe des Demo-Slider anpassen