Flexibler Slider in Breite und Höhe

Hallo liebe Community,

ich versuche gerade eine Seite mit folgendem Layout Umzusetzen: http://www.ensch-media.de/webserver/broy/index.php
Ich habe mir mal die Erweiterung jedoFlexSlider installiert und bekomme es einfach nicht hin, das sich die Fotos auch in der Höhe skalieren. Wenn ich das Browserfenster in der Breite verkleinere, werden die Bilder skaliert. Wenn ich nur die Höhe verändere, skaliert er leider nicht und der Browser blendet den Scrollbalken ein. Hat jemand eine Idee?

Liebe Grüße,
Dirk

Ich kenne den FlexSlider zwar nicht, aber ich würde an 2 Dinge dabei denken:

1. Dem Quelltext der Beispielseite ist zu entnehmen, dass das umgebende div und das Bild unterschiedliche Größenangaben aufweisen. Hast Du in diese Richtung schon was ausprobiert?
2. Bei normalen Bildern verwende ich oft die "auto"-Anweisung entweder bei der Höhe oder der Breite. Auch die max-width / max-height könnte hilfreich sein ;).

Ich finde den Banner auf http://www.ensch-media.de/webserver/broy/index.php sehr interessant. Ich bin neu hier und lerne gerade das programmieren und bin auf der Suche nach solch einem Banner? Ist er schwierig zu programmieren? Würde mich auf ein Feedback freuen.

@dirksche
In den Slidereinstellung keine Breiten- oder Höhenangaben machen, da ja alles flexibel sein soll.

Die Slides sollten alle die gleichen Breiten und Höhen haben.
img bekommen im CSS alle width: 100%; so dass Sie automatisch die Breite des umschließenden divs einnehmen (bei dir wahrscheinlich Breite von #header)

@gabrielkhod
Um einen Slider in Contao einzubauen, musst du nicht unbedingt programmieren können, sondern du musst dich mit dem System Contao zunächst auseinandersetzen und einiges über CSS wissen. Die Slider werden als sogenannte Extensions eingebunden.

Grundinformationen stehen im Wiki
Eine Sliderauswahl für Contao 2.11.x gibt es hier

Hallo Zusammen,

ich habe ebenfalls die Erweiterung FlexSlider installiert und nun meine Probleme bei der Inbetriebnahme (Conto 3.0.1).

Für meinen Test verwende ich zwei Bilder. Per CSS-Formatierung bekomme ich die Gestaltung des Rahmens hin, allerdings werden keine Bilder angezeigt. Ich habe versucht die Größe des "img" anzupassen, da ich hier meine Fehler vermutet habe. Aber ich bekomme es leider nicht hin. Hier habe ich mal den html Code sowie meine CSS-Formatierung:

HTML:

HTML-Code:

---

<h1 class="ce_headline">Servus ihr Nulpen</h1>
<!-- indexer::continue -->

<!-- indexer::stop -->
<div class="ce_text block">

<p>Ich freue mich, dass ihr es geschafft habt unsere Website zu besuchen. Die Seite ist dafür gedacht Infos auszutauschen, Termine zu organisieren, und vergangene Treffen zu würdigen. Wenn wir es schaffen, diese Seite ein wenig zu pflegen, dann denke ich haben wir noch sehr lange etwas davon.&nbsp;</p>
</div>
<!-- indexer::continue -->

<!-- indexer::stop --><section class="ce_flexSlider block">
   
   
               
                <div class="white">
        <div id="startseite" class="flexslider">
          <ul class="slides">
                                            <li><img alt="" src="files/fuenf_maenner/Fotos/startseite_Slideshow/Benni%20045.jpg" />
                                                                                </li>
                                                                                                <li><img alt="" src="files/fuenf_maenner/Fotos/startseite_Slideshow/DSC08755.JPG" />
                                                                                </li>
                                                                    </ul>
        </div>
        </div>
               
   
</section>


<script>
$(window).load(function() {
  $('#startseite').flexslider({
        slideshowSpeed: 3000,
        animationSpeed: 600,
    animation: "slide",
        direction: "horizontal",
                    controlNav: false,
                    directionNav: false,
                randomize: false,
                    pauseOnHover: true,
                    pauseOnAction: true,
        useCSS: false,
    touch: true
  });
});
</script>
<!-- indexer::continue -->

---

CSS:

Code:

---

/** Slideshow **/
div.flexslider {
    width:200px;
    height:200px;
}

ul.flexslider {
    width:200px;
    height:200px;
}

.startseite img {
    width:100%;
    height:100%;
}

---

Vielleicht kann mir jemand bei der CSS-Formatierung oder auf andere Weise helfen.

Vielen Dank!

Hallo 00Snider,

du hast vermutlich vergessen, im Seitenlayout den Haken bei: jQuery laden zusetzen!

Steffen Winde

Hallo Steffen,

danke für den Hinweis! Das wars...Die Bilder werden jetzt angezeigt allerdings passt die Formatierung noch in keinster Weise...

Damit muss ich mich jetzt mal noch auseinander setzten.

Danke für deine Hilfe!

Hallo,

ich versuche immernoch verzweifelt den FlexSlider auf meiner Seite richtig einzubinden. Den Rahmen der Bilder wird an der richtigen Stelle angezeigt und ich kann ihn per CSS formatieren. Die Bilder hängen jedoch am Ende der Seite und füllen die gesamte Spaltenbreite aus. An sich scheint die Slideshow zu funktionieren.

Ich hab in einem anderen Beitrag gelesen, dass die Slideshow immer auf 100% eines umgebenden Elements angepasst wird. Wird die Slideshow bei mir evtl. über die gesamte Spaltenbreite skaliert, da ich sie in die Hauptspalte eingebunden habe? Dann weiß ich allerdings nicht, wie ich die Slideshow in der Hauptspalte skalieren kann...

Wäre super, wenn mir nochmal jemand weiterhelfen könnte!

Danke!