Попробуй это:
CSS
.bx-viewport { min-height: 90vh !important; }
Если это не работает или работает только один раз, попробуйте:
CSS
.bx-viewport.extend { min-height: 90vh !important; }
JQuery
Добавьте эту опцию:
onBeforeSlide: extendVP;
Добавьте это выше конечного тега </body>:
function extendVP($ele, from, to) {
var vp = $('.bx-viewport');
vp.addClass('extend');
}
ОБНОВЛЕНИЕ 1
Если изображения не масштабируются с правильным соотношением сторон или даже не масштабируются, вот 2 предложения:
CSS
Простой
img { width: 100%; height: auto; }
Лучше
Эта процедура включает использование фонового изображения:
- Поместите
<div> на слайд (<li> для вашей разметки), присвойте ему class (например, imgFrame)
- Then place an inline
style attribute on it. Assign the image to imgFrame as follows:
<div class="imgFrame" style="background-image: url('path/to/img.jpg')"></div>
Затем добавьте это в свой CSS:
.imgFrame {
width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: contain;
}
ОБНОВЛЕНИЕ 2
Модификации, сделанные в этой демонстрации bxSlider, не предназначены для демонстрации того, что она работает, потому что в первую очередь у нее нет проблемы с высотой. Его цель - показать источник и объяснить, что он делает. При создании этой демонстрации я создал функцию adaptiveWidth(), это необязательно. Что он делает, так это при загрузке страницы, у него есть оверлей, после нажатия он переходит в полноэкранный режим, а затем быстро выходит из полноэкранного режима, когда оверлей исчезает. Надеюсь, это выведет bxSlider из ступора.
CodePen
CSS
<link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet"/>
/* Default Style ____________________________________________________*/
html, body { box-sizing: border-box; }
html { height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: auto; }
body { height: 100%; width: 100%; position: relative; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
/* Aesthetics [Optional]_____________________________________________*/
html { font: 400 16px/1.45 'Source Code Pro'; }
body { background: #000; color: #FFF; font-variant: small-caps; }
h1 { font-size: 3rem; font-weight: 700; }
/* jquery.bxslider.css jsDelvr.com Image Override ___________________*/
.bx-wrapper .bx-loading { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif') center center no-repeat #ffffff; }
.bx-wrapper .bx-prev { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') no-repeat 0 -32px; }
.bx-wrapper .bx-next { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') no-repeat -43px -32px; }
.bx-wrapper .bx-controls-auto .bx-start { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') -86px -11px no-repeat; }
.bx-wrapper .bx-controls-auto .bx-stop { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') -86px -44px no-repeat; }
/* bxSlider init Style ___________________________________________*/
#overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999999999; height: 101%; width: 101%; overflow: hidden; cursor: pointer; pointer-events: auto; background-color: black; opacity: .5; }
.ext { max-width: -moz-fit-content; max-width: -webkit-fit-content; max-width: fit-content; width: auto; height: auto; padding: 25%; } /* adaptiveWidth Style [Optional] */
HTML
<body class="expand">
<div id="overlay"><h1>Click anywhere to start</h1></div>
<div class="ext"> <!-- adaptiveWidth Wrapper [Optional] -->
<ul class='bxslider'>
<li>
<img src="http://dummyimage.com/500X16:9/000/FFF.png&text=1"/>
</li>
<li>
<img src="http://dummyimage.com/500X4:3/07C/FC0.png&text=2"/>
</li>
<li>
<img src="http://dummyimage.com/4:3X400/D06/0FF.png&text=3"/>
</li>
<li>
<img src="http://dummyimage.com/640X16:9/765/cee.png&text=4"/>
</li>
<li>
<img src="http://dummyimage.com/210X16:9/B40/6F3.png&text=5"/>
</li>
<li>
<img src="http://dummyimage.com/16:9X420/E2F/FC9.png&text=6"/>
</li>
</ul>
</div>
JQ/JS
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<!-- [Suggestion] Don't use the minified version: jquery.bxslider.min.js, it's buggy -->
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>
/* Page loads #overlay */
$(document).ready(function() { // jQ DocReady
$("#overlay").one('click', function(event) { // User clicks #overlay
event.stopImmediatePropagation(); // Isolate Event
var tgt = document.querySelector('.expand'),// Target <body>
that = this; // Establish this as that
enterFS(tgt); // Enter full screen to wakeup bxSlider!
exitFS(); // Exit full screen
$(that).fadeOut(1000, function() { // #overlay fades...
$(that).remove(); // #overlay is gone
});
});
/* Adaptive bxSlider */
var bx = $('.bxslider').bxSlider({
adaptiveHeight: true, // http://bxslider.com/options#adaptiveHeight
onSlideBefore: adaptiveWidth // Callback [optional]
});
});
/* adaptiveHeight [Optional] */
function adaptiveWidth($ele, from, to) {
var imgWidth = $ele.find('img').width();
var bxWidth = $('.bx-wrapper').width(imgWidth);
}
/* Enter Full Screen */
function enterFS(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
/* Exit Full Screen */
function exitFS() {
if(document.exitFullscreen) {
document.exitFullscreen();
}
else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
person
zer00ne
schedule
14.11.2015
