Question Curseur Jssor 100% largeur


J'essaye d'avoir un jssor curseur fonctionnant avec 100% de largeur (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?


23
2018-02-03 14:14


origine


Réponses:


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

utilisez le code suivant pour redimensionner le curseur à 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

De plus, vous pouvez redimensionner le curseur à 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
2018-02-04 00:38



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

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


7
2018-03-29 10:59



En utilisant Bootstrap, si vous avez Jssor dans un X colonne div, 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
2017-10-11 18:18



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 plutôt le parent. J'ai trouvé un meilleur code, donc le curseur s'étendra sur toute sa largeur. Vous pouvez le modifier légèrement pour utiliser la largeur parente ou la largeur de la fenêtre.

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


1
2017-07-12 15:10



Pour tous ceux qui recherchent $ ResizeCanvas. Ils ont finalement 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 (width,   height) au lieu de $ ResizeCanvas.

(ceci a d'abord été posté ici)


1
2017-08-31 00:51