Я пытаюсь получить ползунок jssor со 100% шириной (контейнер имеет ширину 70%). Проблема в том, что jssor работает только с пикселями, поэтому, если я использую slide_container шириной 100%, слайдер больше не работает. Есть ли уловка, как заставить это работать?Jssor слайдер 100% ширина
ответ
Размер «slide_container» должен всегда указываться с фиксированными пикселями. Исходный размер исправлен, но вы можете масштабировать слайдер до любого размера.
использовать следующий код для масштабирования ползунка до ширины document.body.
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
также можно масштабировать ползунок ширины родительского элемента,
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//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)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
Это еще ограничить ползунок в ширину всего 1920 пикс, максимум. Так что на моем большом слайдере экран не покрывал 100% ширины. Поэтому вам может понадобиться изменить этот 1920 на большее количество. Я сделал с 19200 (один ноль в конце фиксировал все). Как только я подкорректировал это значение, он теперь увеличит ширину экрана.
Использование Bootstrap, если у вас есть Jssor внутри X
колонны div
, например, col-lg-12
:
jssor_slider1.$ScaleWidth(
Math.max(
Math.min
(parseInt($(".col-lg 12").css("width").replace("px", "")) -
(parseInt($(".col-lg-12").css("padding-left").replace("px", "")) +
parseInt($(".col-lg-12").css("padding-right").replace("px","")))),100));
Как кто-то заметил, существует проблема, когда ширина ползунка является меньшим, чем ширина его родителя. Chrome использует максимальный размер слайдера, вместо этого Firefox использует родителя. Я нашел лучший код, поэтому ползунок будет растягиваться до полной ширины. Вы можете немного изменить его, чтобы использовать ширину родителя или ширину окна.
Для тех, кто приходит в поисках $ ResizeCanvas. Наконец, они добавили функцию, которая может помочь получить требуемый размер слайдера с помощью $ ScaleSize. Благодаря jssor
For the latest version 25.2.0, we added a new method $ScaleSize(width, height) instead of $ResizeCanvas.
(это был первый отправил here)
Вау, спасибо очень много;) Вы спасли мой день, который прекрасно работает – Reignbeaux
Это теперь является частью демки «Full Width Slider», справа ? –
Да, это часть ползунка полной ширины. – jssor