Jquery Jssor-使用全宽滑块创建边距
我使用的是“全宽滑块”,只是我不希望它是全宽的,我希望它在一个占页面80%的div中是全宽的。我在调整slider1_容器的宽度时遇到了问题(例如,如果我减少了数字,它的大小会增加)。所以我决定创建我自己的div,让它放在这里面。问题是,当我为自己的div设置css样式时,左边距为:10px;或左边缘:10%;无论我的页面有多大,它都会将幻灯片推到侧面(10px或10%),从而生成一个滚动条。我希望容器(可以是我的容器)占据页面的80%,每边留有10%的边距。右边空白似乎对我的幻灯片容器也没什么作用 用我的代码更新:Jquery Jssor-使用全宽滑块创建边距,jquery,html,css,jssor,Jquery,Html,Css,Jssor,我使用的是“全宽滑块”,只是我不希望它是全宽的,我希望它在一个占页面80%的div中是全宽的。我在调整slider1_容器的宽度时遇到了问题(例如,如果我减少了数字,它的大小会增加)。所以我决定创建我自己的div,让它放在这里面。问题是,当我为自己的div设置css样式时,左边距为:10px;或左边缘:10%;无论我的页面有多大,它都会将幻灯片推到侧面(10px或10%),从而生成一个滚动条。我希望容器(可以是我的容器)占据页面的80%,每边留有10%的边距。右边空白似乎对我的幻灯片容器也没什么
//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>
你做得对。请使用以下代码在容器中安装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
非常感谢。但它现在无法扩展(即响应性)。也许我的“slider1_容器”和“slides”的宽度也需要一个百分比?但它似乎不喜欢那样。。
//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