web-dev-qa-db-fra.com

Curseur Jssor 100% largeur

J'essaie d'obtenir un curseur jssor fonctionnant avec une largeur de 100% (le conteneur a une largeur de 70%). Le problème est que jssor ne fonctionne qu'avec des pixels, donc si j'utilise un slide_container avec une largeur de 100%, le curseur ne fonctionne plus. Y a-t-il une astuce pour que cela fonctionne?

sliderwidthjssor
23
Reignbeaux

la taille de 'slide_container' doit toujours être spécifiée avec des pixels fixes. la taille d'origine est alors fixe, mais vous pouvez redimensionner le curseur à n'importe quelle taille.

utilisez le code suivant pour mettre le curseur à l'échelle de la largeur 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

vous pouvez également mettre le curseur à l'échelle de la largeur de l'élément parent,

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
38
jssor

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

Cela limite toujours le curseur à seulement 1920 pixels de large, maximum. Donc, sur mon grand écran, le curseur ne couvrait pas 100% de large. Vous devrez donc peut-être changer ce 1920 en quelque chose de plus grand. Je l'ai fait avec 19200 (un zéro à la fin a tout corrigé). Une fois que j'ai ajusté cette valeur, elle s'étend maintenant sur toute la largeur de mon écran.

7
George

En utilisant Bootstrap, si vous avez Jssor dans une colonne Xdiv, par exemple, 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));
3
picobyte

Comme quelqu'un l'a remarqué, il y a un problème lorsque la largeur du curseur est inférieure à la largeur de son parent. Chrome utilise la taille maximale du curseur, Firefox utilise le parent à la place. J'ai trouvé un meilleur code, donc le curseur s'étirera sur toute la largeur. Vous pouvez le modifier légèrement pour utiliser la largeur du parent ou la largeur de la fenêtre.

Comment puis-je faire en sorte que JSSOR change son format d'image?

1
Zod

Pour tous ceux qui recherchent $ ResizeCanvas. Ils ont enfin ajouté une fonction qui peut aider à obtenir la taille de curseur requise avec $ ScaleSize. Merci jssor

Pour la dernière version 25.2.0, nous avons ajouté une nouvelle méthode $ ScaleSize (largeur, hauteur) au lieu de $ ResizeCanvas.

(ceci a été publié pour la première fois ici )

1
Ayush Agrawal