Banner mit Bildershow, responsive

[jfd]

Hallo, ich suche eine Lösung für ein Banner, das so ähnlich wie ein <marquee></marquee> funktioniert. Wenn das Fenster verkleinert wird, sollen die Bilder automatisch mit verkleinert werden (responsive). Hier ist ein Beispiel was ich meine, anstelle der sich bewegenden Texte lassen sich Bilder verwenden. In diesen Beispielen passen sich allerdings die Bilder nicht an die Fenstergröße an.

 

[rico2009]

Examples | Responsive jQuery Slider | bxSlider

Wäre sowas was für dich?


BTW: marquee-Tags sind zum Glück! so gut wie ausgestorben. Sowas macht man heute nicht mehr und die Browser unterstüzen diesen Tag auch mittlerweile nicht mehr alle.

 

[jfd]

Danke für den Link, das geht in die Richtung die ich mir vorstelle. Die Bilder sollen nach meinen Vorstellungen automatisch von unten nach oben durchlaufen. In den Beispielseiten (bxslider.com/examples) sind Konfigurationsmöglichkeiten vorhanden, wie beispielsweise

$('#slider1').bxSlider({
  mode: 'fade',
  auto: true,
  autoControls: true,
  pause: 2000
});

Weitere Konfigurationen würde ich gerne einbauen, vor allem die Geschwindigkeit und die Größe der Slideshow. Gehe ich recht in der Annahme, dass speziellere Konfigurationen nicht so einfach sind?

 

[Pariak]

Hallo jfd,

hast du schon mal auf der Seite von bxSlider geschaut?

Hier findest du alle Konfigurationsmöglichkeiten: Options | Responsive jQuery Slider | bxSlider

Geschwindigkeit kannst du durch "speed" steuern.
Die Breite (wenn mich nicht alles täuscht, steuerst du über "slideWidth".

Ich hoffe, das hilft weiter

Beste Grüße
Pariak

 

[jfd]

Dankesehr, bxSlider funktioniert prima. Bei diesem Beispiel laufen die Bilder automatisch von unten nach oben.

In die *.html im head-Bereich eingefügt:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- bxSlider Javascript file -->
<script src="/jquery.bxslider.min.js"></script>

<!-- bxSlider CSS file -->
<link href="/jquery.bxslider.css" rel="stylesheet" />

In die *.html im body-Bereich eingefügt:

<!--Irgendwelche Bilder, irgendwelche Größen-->
<ul id="slider1">
  <li><img src="bilder/diesesbild_1.jpg" width="900" height="300" /></li>
  <li><img src="bilder/diesesbild_2.jpg" width="900" height="300" /></li>
  <li><img src="bilder/diesesbild_3" width="900" height="300" /></li>
</ul>

<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
  minSlides: 1,
  maxSlides: 1,
  slideWidth: 900,
  slideMargin: 10,
  ticker: true,
  speed: 10000,
  mode: 'vertical',
  tickerHover: true,
  responsive: true,
  useCSS: false
});
});
</script>

In der jquery.bxslider.css Formatierungen geändert (Außenrahmen entfernt).
/*border: solid #fff 5px;*/

Wenn die Bilder nicht von unten nach oben laufen sollen, sondern überblendet werden sollen, muss nur in der *.html im body-Bereich das JavaScript geändert werden:

<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
  mode: 'fade',
  auto: true,
  pause: 2500,
  autoStart: true,
  autoHover: true
});
});
</script>

 

[rico2009]

Das sieht doch alles sehr gut aus.

Eventuell wäre der letzte Post #5 sogar was für unser Tutorial, so nach dem Motto "So bindet man den bxslider in der Standard Konfiguration ein"