У меня настроен слайдер с подписями, как я хотел бы, и все отлично работает в левой части экрана, но я бы хотел, чтобы он был по центру.
Я искал ответ и нашел в нескольких темах, добавляющих «margin: 0 auto;» в слайд-контейнер сделает свое дело. Однако в моем случае, когда я добавляю «margin: 0 auto;» к контейнеру ползунка он перемещает контейнер в центр, однако он перестает работать, у меня что-то застревает, а слайды, если они появляются, блочные.
Удаление параметра поля фиксирует ползунок и возвращает его в левое выравнивание, поэтому все остальное, кажется, работает. Я просто не могу, чтобы он был посередине и работал.
<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>
Заранее огромное спасибо за любую помощь и указание меня в правильном направлении