Ползунок Jssor шириной 100%

Ответ 1

размер '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

Ответ 2

jssor_slider1. $ScaleWidth (Math.min(bodyWidth, 1920));

Это ограничение по-прежнему ограничивает ширину всего 1920 пикселей в ширину. Так что на моем большом слайдере экран не покрывал 100% ширины. Поэтому вам может понадобиться изменить этот 1920 на большее количество. Я сделал с 19200 (один ноль в конце фиксировал все). Как только я отрегулировал это значение, теперь он также увеличит ширину экрана.

Ответ 3

Использование 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));

Ответ 4

Как заметил кто-то, возникает проблема, когда ширина ползунка меньше его родительской ширины. Chrome использует максимальный размер слайдера, вместо этого Firefox использует родителя. Я нашел лучший код, поэтому ползунок будет растягиваться до полной ширины. Вы можете немного изменить его, чтобы использовать ширину родителя или ширину окна.

Как я могу заставить JSSOR изменить его соотношение сторон?

Ответ 5

Для тех, кто ищет $ResizeCanvas. Наконец, они добавили функцию, которая может помочь получить требуемый размер слайдера с помощью $ScaleSize. Спасибо jssor

Для последней версии 25.2.0 мы добавили новый метод $ScaleSize (ширина, height) вместо $ResizeCanvas.

(это было впервые опубликовано здесь)