我正在使用全宽滑块'只有我不希望它是全宽,我希望它在一个占据页面大约80%的div中的全宽。我无法调整slider1_container的宽度(例如,如果我减去它会增加的数量)。所以我决定创建自己的div,让它坐在这里。问题是,当我使用margin-left设置我自己的div的css样式时:10px;或保证金左:10%;它将幻灯片推送到侧面(10px或10%),这将生成一个滚动条,无论我的页面有多大。我希望容器(可以是我的容器)占据页面的80%,每边有10%的边距。 Margin-right似乎对幻灯片中的容器没有任何作用。
更新了我的代码:
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth) {
var sliderWidth = parentWidth;
//keep the slider width no more than 800
sliderWidth = Math.min(sliderWidth, 1200);
jssor_slider1.$ScaleWidth(sliderWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
};
</script>
<div class="left-slide-container">
<div id="slider1_container" style="position: relative; margin: 0 auto;
top: 0px; left: 0px; width: 1200px; height: 500px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1200px;
height: 500px; overflow: hidden;">
</div>
CSS:
.left-slide-container {
margin-left: 10%;
margin-right: 10%;
width:80%;
}
答案 0 :(得分:0)
你做得对。请使用以下代码在容器中放置jssor滑块。
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth) {
var sliderWidth = parentWidth;
//keep the slider width no more than 800
sliderWidth = Math.min(sliderWidth, 800);
jssor_slider1.$ScaleWidth(sliderWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end