Jssor - Создание полей с помощью ползунка полной ширины
Я использую "Ползунок полной ширины", я не хочу, чтобы он был полной ширины, я хочу, чтобы он был полной шириной внутри элемента div, занимающего около 80% страницы. У меня были проблемы с настройкой ширины slider1_container (например, если я уменьшу число, оно увеличится в размере). Поэтому я решил создать свой собственный div и оставить его в этом. Проблема в том, что когда я устанавливаю стили CSS для моего собственного div с margin-left: 10px; или поле слева: 10%; он сдвигает слайд-шоу в сторону (либо на 10 пикселей, либо на 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>
CSS:
.left-slide-container {
margin-left: 10%;
margin-right: 10%;
width:80%;
}
1 ответ
Вы делаете правильно. Пожалуйста, используйте следующий код, чтобы разместить слайдер 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