Jssor slider 100% Largeur
j'essaie d'obtenir un jssor curseur de travail avec 100% de la largeur (le conteneur a une largeur de 70%). Le problème est que jssor ne fonctionne qu'avec les pixels, donc si j'utilise un slide_container avec une largeur de 100%, le slider ne fonctionne plus. Est-il une astuce comment obtenir ce travail?
5 réponses
taille de "slide_container" doit toujours être spécifiée avec des pixels fixes. la taille originale est alors fixe, mais vous pouvez dimensionner le curseur à n'importe quelle taille.
utilisez le code suivant pour ajuster le curseur à la largeur du document.corps.
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 adapter 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
jssor_slider1.$Largeur(En Mathématiques.min (bodyWidth, 1920));
ce slider limite encore à seulement 1920 pix de large, maximum. Donc à mon grand écran slider ne couvrait pas 100% large. Donc vous pourriez avoir besoin de changer ce 1920 en quelque chose de plus grand nombre. Je l'ai fait avec 19200 (un zéro à la fin fixe). Une fois que j'ai ajusté la valeur maintenant strech toute la largeur de mon écran.
utilisant Bootstrap, si vous avez Jssor à l'intérieur d'une colonne X div , p.ex. 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));
comme quelqu'un l'a remarqué, il y a un problème lorsque la largeur du curseur est inférieure à celle du parent. Chrome utilise la taille maximale du curseur, Firefox utilise le parent à la place. J'ai trouvé un meilleur code, donc le curseur va s'étirer sur toute sa largeur. Vous pouvez le modifier légèrement pour utiliser la largeur parent ou la largeur de la fenêtre.
pour quiconque vient chercher $ ResizeCanvas. Ils ont finalement ajouté une fonction qui peut aider à obtenir la taille de curseur nécessaire avec $ScaleSize. Merci jssor
pour la dernière version 25.2.0, nous avons ajouté une nouvelle méthode $ScaleSize (width, hauteur) au lieu de $ ResizeCanvas.
(ceci a été affiché pour la première fois ici )