full - photo slider

Jssor slider 100% ancho

Question

Intento que un jssor deslizante jssor funcione con un ancho del 100% (el contenedor tiene un ancho del 70%). El problema es que jssor solo funciona con píxeles, por lo que si uso un slide_container con un ancho del 100%, el control deslizante ya no funciona. ¿Hay algún truco para hacer que esto funcione?

Answer 1

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

Esto sigue limitando el control deslizante a solo 1920 píxeles de ancho, máximo. Así que en mi pantalla grande el control deslizante no cubría el 100% de ancho. Así que es posible que necesites cambiar ese 1920 a un número mayor. Lo hice con 19200 (un cero al final fijo todo). Una vez que ajusté ese valor, ahora también se extiende todo el ancho de mi pantalla.

Answer 2

Como alguien notó, hay un problema cuando el ancho del control deslizante es menor que el ancho de su padre. Chrome usa el tamaño máximo del control deslizante, Firefox usa el padre en su lugar. He encontrado un mejor código, por lo que el control deslizante se extenderá a todo el ancho. Puede modificarlo ligeramente para usar el ancho del padre o el ancho de la ventana.

¿Cómo puedo hacer que JSSOR cambie su relación de aspecto?

Answer 3

El tamaño de ''slide_container'' debe especificarse siempre con píxeles fijos. El tamaño original es fijo entonces, pero puede escalar el control deslizante a cualquier tamaño.

use el siguiente código para escalar el control deslizante al ancho de 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

también, puede escalar el control deslizante al ancho del elemento padre,

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 4

Para quien viene buscando $ ResizeCanvas. Finalmente, han agregado una función que puede ayudar a obtener el tamaño del control deslizante requerido con $ ScaleSize. Gracias jssor

Para la última versión 25.2.0, agregamos un nuevo método $ ScaleSize (ancho, alto) en lugar de $ ResizeCanvas.

(Esto fue publicado por primera vez here )

Answer 5

Usando Bootstrap, si tiene Jssor dentro de una columna X div , por ejemplo, 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));