jssor滑块当我加载项(边距:0自动;)时,它居中但停止工作
我已经有了滑块配置与标题,因为我想他们和所有的作品完美地在左侧的屏幕,但我希望它是中央 我一直在搜索annswer,在一些添加“margin:0auto;”的线程中发现了它到幻灯片容器将完成此操作。但是在我的例子中,当我添加“margin:0 auto;”对于滑块容器,它确实会将容器移动到中心,但它会停止工作,对我来说有点堵塞,如果幻灯片看起来很块状的话jssor滑块当我加载项(边距:0自动;)时,它居中但停止工作,jssor,Jssor,我已经有了滑块配置与标题,因为我想他们和所有的作品完美地在左侧的屏幕,但我希望它是中央 我一直在搜索annswer,在一些添加“margin:0auto;”的线程中发现了它到幻灯片容器将完成此操作。但是在我的例子中,当我添加“margin:0 auto;”对于滑块容器,它确实会将容器移动到中心,但它会停止工作,对我来说有点堵塞,如果幻灯片看起来很块状的话 移除边距设置修正了滑块并把它放在左对齐上,所以其他的东西似乎都起作用了,我不能在中间工作。< /P> <script>
移除边距设置修正了滑块并把它放在左对齐上,所以其他的东西似乎都起作用了,我不能在中间工作。< /P>
<script>
jQuery(document).ready(function ($) {
var _CaptionTransitions = [];
_CaptionTransitions["L"] = {$Duration:900,$Zoom:1,$Easing:$JssorEasing$.$EaseInCubic};
var options = {
$AutoPlay: true,
$DragOrientation: 3,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
function ScaleSlider() {
var windowWidth = $(window).width();
if (windowWidth) {
var windowHeight = $(window).height();
var originalWidth = jssor_slider1.$OriginalWidth();
var originalHeight = jssor_slider1.$OriginalHeight();
if (originalWidth / windowWidth > originalHeight / windowHeight) {
jssor_slider1.$ScaleHeight(windowHeight);
}
else {
jssor_slider1.$ScaleWidth(scaleWidth);
}
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
else {
$(window).bind("orientationchange", ScaleSlider);
}
//responsive code end
});
</script>
> <!-- Jssor Slider Begin -->
> <!-- You can move inline styles to css file or css block. -->
> <div id="slider1_container" style="position: relative; margin: 0 auto; width: 600px; height: 480px;">
> <!-- Slides Container -->
> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:600px; height:480px; overflow: hidden;">
> <div> <img u="image" src="portfolio/synthetic and teak deck.jpg" />
> <div u="caption" t="L" style="position: absolute;
> top: 125px; left: 125px; width: 350px;height: 50px;"><Code>Synthetic and teak decking</code>
> </div>
> </div>
> <div> <img u="image" src="portfolio/teak pool deck.jpg" />
> <div u="caption" t="L" style="position: absolute;
> top: 125px; left: 125px; width: 350px;height: 50px;"><code>Teak decking around the pool</code>
> </div>
> </div>
非常感谢您的帮助并为我指明了正确的方向代码中有一个错误 请更换
jssor_slider1.$ScaleWidth(scaleWidth);
与
请注意“边距:0自动;”仅当父图元比图元宽时,才会将图元中心与其父图元对齐。因此,如果使用全屏滑块,它将不起作用。这里有一个技巧,请将滑块放入包装器中,如下所示:
<div style="position: relative; width: 100%; background-color: #003399; overflow: hidden;">
<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
</div>
</div>
当我右键单击chrome并点击inspect元素时,添加的信息显示了一个错误:“未捕获引用错误:未定义scaleWidth”-无论我是否添加了边距片段,chrome都会报告相同的错误,这可能是问题吗?
<div style="position: relative; width: 100%; background-color: #003399; overflow: hidden;">
<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
</div>
</div>
<script>
jQuery(document).ready(function ($) {
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 900, $Zoom: 1, $Easing: $JssorEasing$.$EaseInCubic };
var options = {
$AutoPlay: true,
$DragOrientation: 3,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider to scale along with window
function ScaleSlider() {
var windowWidth = $(window).width();
if (windowWidth) {
var windowHeight = $(window).height();
var originalWidth = jssor_slider1.$OriginalWidth();
var originalHeight = jssor_slider1.$OriginalHeight();
if (originalWidth / windowWidth > originalHeight / windowHeight) {
jssor_slider1.$ScaleHeight(windowHeight);
}
else {
jssor_slider1.$ScaleWidth(windowWidth);
}
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<div style="position: relative; width: 100%; background-color: #003399; overflow: hidden;">
<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="position: relative; margin: 0 auto; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:600px; height:300px; overflow: hidden;">
<div>
<img u="image" src="portfolio/synthetic and teak deck.jpg" />
<div u="caption" t="L" style="position: absolute;
top: 125px; left: 125px; width: 350px;height: 50px;">
<code>Synthetic and teak decking</code>
</div>
</div>
<div>
<img u="image" src="portfolio/teak pool deck.jpg" />
<div u="caption" t="L" style="position: absolute;
top: 125px; left: 125px; width: 350px;height: 50px;">
<code>Teak decking around the pool</code>
</div>
</div>
</div>
</div>
</div>
</div>