我正在使用the Jssor library来创建图片滑块。我将$ FillMode设置为4,以便图像适合容器,但它不起作用。这是其中一个图像的样子:
所以我尝试了所有其他模式,没有看到任何变化。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jssor.core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jssor.utils.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script>
</head>
<body>
<div id="main">
<h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;">
<div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div>
</div>
<script>jssor_slider1_starter('slider1_container');</script>
</div>
</div>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
</body>
</html>
答案 0 :(得分:1)
刚刚为我的CSS添加了max-width和max-height,如下所示:
<style>
#slider1_container img {
max-width:100%;
max-height:100%;
}
</style>
答案 1 :(得分:0)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script>
</head>
<body>
<div id="main">
<h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;">
<div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div>
</div>
<script>jssor_slider1_starter('slider1_container');</script>
</div>
</div>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
</body>
</html>
答案 2 :(得分:0)
FillMode有一个选项,即5.表示(包含大图像,小图像的实际尺寸)。 Haven没有尝试过,但它应该可以工作。
参考Link
答案 3 :(得分:0)
几年后也遇到了同样的问题。 并不是真的想用CSS乱搞,我认为它一定是$ FillMode工作方式中的一个错误,或者一定有一些不明显的容器/与其冲突。 绝对不要“包含”图像,尝试所有$ FillMode s
注意:使用的最新版本为2019.06.28。