I've got the slider configured with captions as I'd like them and all works perfectly on the left hand side of the screen but I'd like it to be centred.
I've been searching for the annswer and found in a number of threads that adding 'margin: 0 auto;' to the slide container will do the trick. However in my case when I add the 'margin: 0 auto;' to the slider container it does move the container to the centre however it stops working, kind of jams up on me and the slides if they appear are blocky.
Removing the margin setting fixes the slider and puts it back on a left alignment so everything else seems to work I just can't have it in the middle and working.
<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>
Huge thanks in advance for any help and pointing me in the right direction
There is a mistake in the code,
Please replace
jssor_slider1.$ScaleWidth(scaleWidth);
with
jssor_slider1.$ScaleWidth(windowWidth);
Note that 'margin: 0 auto;' will align element center to it's parent element only if the parent element is wider than the element. So, it will not work in case of a full screen slider. Here is a trick, please place your slider in a wrapper as follows,
<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>
Finally, your code should be as below,
<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>