Jssor слайдер 100% ширина

Question

Я пытаюсь получить ползунок jssor со 100% шириной (контейнер имеет ширину 70%). Проблема в том, что jssor работает только с пикселями, поэтому, если я использую slide_container шириной 100%, слайдер больше не работает. Есть ли уловка, как заставить это работать?

Answer 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 

Answer 2

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

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

Answer 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)); 

Answer 4

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

How can I make JSSOR change its aspect ratio?

Answer 5

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

For the latest version 25.2.0, we added a new method $ScaleSize(width, height) instead of $ResizeCanvas.

(это был первый отправил here)