jquery - Jssor - 使用全宽 slider 创建边距

Question

我正在使用“全宽 slider ”，只是我不希望它是全宽的，我希望它在占页面大约 80% 的 div 内是全宽的。我在调整 slider1_container 的宽度时遇到了问题(例如，如果我减少了它的数量，它的大小就会增加)。所以我决定创建自己的 div 并让它位于其中。问题是当我用 margin-left: 10px; 为我自己的 div 设置 css 样式时。或 margin-left: 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%;
}

Answer 1

你做得对。请使用以下代码使 jssor slider 适合您的容器。

//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