raven16
Lieutenant
- Registriert
- Nov. 2008
- Beiträge
- 580
Hallo,
ich versuche mich derzeit an die automatische Skalierung von Bildern innerhalb des Bootstrap-Sliders.
Die Höhe des Bildes wird derzeit automatisch mit jQuery an die Fensterhöhe des Bildschirmes angepasst.
Problem dabei ist natürlich, dass der Slider immer eine Breite von 100% haben soll. Dies führt dann natürlich zu der Zerstörung des Seitenverhältnisses der Bilder. Ich möchte daher mit jQuery das Bild automatisch zuschneiden.
Beispiel
HTML/PHP
jQuery
Ich habe vorhin mal dieses Script getestet, aber dies führt nur dazu, dass der Slider weiß bleibt.
Gruß
ich versuche mich derzeit an die automatische Skalierung von Bildern innerhalb des Bootstrap-Sliders.
Die Höhe des Bildes wird derzeit automatisch mit jQuery an die Fensterhöhe des Bildschirmes angepasst.
Problem dabei ist natürlich, dass der Slider immer eine Breite von 100% haben soll. Dies führt dann natürlich zu der Zerstörung des Seitenverhältnisses der Bilder. Ich möchte daher mit jQuery das Bild automatisch zuschneiden.
Beispiel
HTML/PHP
PHP:
<div class="container-fluid border-green-bottom padding-none" id="slider">
<div id="main-slider" class="carousel fade" data-ride="carousel" data-pause="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img class="img-slider" src="<?php bloginfo('template_directory'); ?>/img/global/slider/pier.jpg" alt="Pier">
</div>
<div class="item active">
<img class="img-slider" src="<?php bloginfo('template_directory'); ?>/img/global/slider/duehne.jpg" alt="Dühne">
</div>
<div class="item">
<img class="img-slider" src="<?php bloginfo('template_directory'); ?>/img/global/slider/path.jpg" alt="Weg">
</div>
</div>
</div>
</div>
jQuery
Code:
function mainSlider(){
var sliderHeight = $(window).height() - $("#headerbox").height() - 20;
$(".img-slider").css({"height":sliderHeight});
sliderHeight = sliderHeight + 20;
$("#slider").css({"height":sliderHeight});
$("#main-slider").css({"height":sliderHeight});
$('.carousel').carousel({
interval: 1000 * 7
});
}
mainSlider();
Ich habe vorhin mal dieses Script getestet, aber dies führt nur dazu, dass der Slider weiß bleibt.
Gruß