JSSOR 我的滑块在小分辨率下太小答案

【问题标题】：JSSOR my slider is too small in small resolutionJSSOR 我的滑块在小分辨率下太小
【发布时间】：2018-10-17 16:59:47
【问题描述】：

我的问题出在标题上。我的滑块反应灵敏，但在小分辨率下无法正确读取任何内容。目前我把它放在我网站的测试页面中： https://www.assistante-34.com/test.html 您将在我的页面中找到代码。

<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<script src="/jssor/jssor.slider-27.5.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jssor_1_slider_init = function() {

        var jssor_1_SlideshowTransitions = [
          {$Duration:1000,x:-1,y:2,$Rows:2,$Zoom:11,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Row:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.85}},
          {$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2}
        ];

        var jssor_1_options = {
          $AutoPlay: 1,
          $SlideDuration: 900,
          $FillMode: 1,
          $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: jssor_1_SlideshowTransitions,
            $TransitionsOrder: 1
          },
          $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$,
            $SpacingX: 2,
            $SpacingY: 2
          }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

        /*#region responsive code begin*/

        var MAX_WIDTH = 3000;

        function ScaleSlider() {
            var containerElement = jssor_1_slider.$Elmt.parentNode;
            var containerWidth = containerElement.clientWidth;

            if (containerWidth) {

                var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                jssor_1_slider.$ScaleWidth(expectedWidth);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }

        ScaleSlider();

        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        /*#endregion responsive code end*/
    };
</script>
<link href="//fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic&subset=latin-ext,greek-ext,cyrillic-ext,greek,vietnamese,latin,cyrillic" rel="stylesheet" type="text/css" />
<style>
    .jssorl-004-double-tail-spin img{animation-name:jssorl-004-double-tail-spin;animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes jssorl-004-double-tail-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}.jssorb032{position:absolute}.jssorb032 .i{position:absolute;cursor:pointer}.jssorb032 .i .b{fill:#fff;fill-opacity:1;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:.25}.jssorb032 .i:hover .b{fill:#bfce00;fill-opacity:.6;stroke:#fff;stroke-opacity:.35}.jssorb032 .iav .b{fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35}.jssorb032 .i.idn{opacity:.3}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;visibility:hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" class="jssorl-004-double-tail-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
        <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="/jssor/everlia2/double-tail-spin.svg" />
    </div>
    <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;">
        <div>
            <img data-u="image" src="/jssor/everlia2/maison-container-equitable.jpg" />
            <div style="position:absolute;top:9px;left:84px;width:663px;height:102px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
                <div>La construction équitable,</div>
                <div>nouvelle génération</div>
            </div>
            <div style="position:absolute;top:9px;left:84px;width:637px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
                <div>La construction équitable,</div>
                <div>nouvelle génération</div>
            </div>
            <a href="http://www.everlia.com" style="display:block; position:absolute;top:127px;left:87px;width:84px;height:26px;max-width:84px;">
                <img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
            </a>
        </div>
        <div>
            <img data-u="image" src="/jssor/everlia2/maison-container-evolutive.jpg" />
            <div style="position:absolute;top:9px;left:84px;width:897px;height:114px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
                <div>Construction évolutive,</div>
                <div>create your fashion design<br />
                </div>
            </div>
            <div style="position:absolute;top:9px;left:84px;width:870px;height:112px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
                <div>Construction évolutive,</div>create your fashion design
            </div>
            <a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
                <img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
            </a>
        </div>
        <div>
            <img data-u="image" src="/jssor/everlia2/maisoncontainerclimatique.jpg" />
            <div style="position:absolute;top:9px;left:84px;width:962px;height:117px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
                <div>Une construction climatique<br />et écologique<br />
                </div>
            </div>
            <div style="position:absolute;top:9px;left:84px;width:943px;height:154px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
                <div>Une construction climatique</div>
                <div>et écologique<br />
                </div>
            </div>
            <a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:89px;width:84px;height:26px;max-width:84px;">
                <img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
            </a>
        </div>
        <div>
            <img data-u="image" src="/jssor/everlia2/maison-container-rapide.jpg" />
            <div style="position:absolute;top:9px;left:84px;width:1093px;height:147px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
                <div>Construction rapide, économique</div>
                <div>et performante<br />
                </div>
            </div>
            <div style="position:absolute;top:9px;left:84px;width:1090px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
                <div>Construction rapide, économique</div>
                <div>et performante<br />
                </div>
                <div></div>
            </div>
            <a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:86px;width:84px;height:26px;max-width:84px;">
                <img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
            </a>
        </div>
        <div>
            <img data-u="image" src="/jssor/everlia2/maison-container-techno.jpg" />
            <div style="position:absolute;top:9px;left:84px;width:1043px;height:153px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
                <div>Construction container haute</div>
                <div>technologie</div>
            </div>
            <div style="position:absolute;top:9px;left:84px;width:1059px;height:155px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
                <div>Construction container haute</div>
                <div>technologie</div>
                <div></div>
                <div></div>
            </div>
            <a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
                <img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
            </a>
        </div>
    </div>
    <!-- Bullet Navigator -->
    <style>
/* swiper slide*/

.jssorb032 {position: absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;fill:#fff;fill-opacity:1;} 
.jssorb032 .1 .b {fill:#bfce00;fill-opacity:1;stroke:#fff;}
.jssorb032 .i:hover .b {fill: #bfce00;}
.jssorb032 .iav .b {fill:#bfce00;}
</style>
    <div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;data-scale="0.5" data-scale-bottom="0.75">
        <div data-u="prototype" class="i" style="width:15px;height:15px;">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <circle class="b" cx="8000" cy="8000" r="5800"></circle>
            </svg>
        </div>
    </div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->

可能是我做错了。感谢您的帮助。

问候，丹妮尔 F.

【问题讨论】：

标签： slider responsive jssor

【解决方案1】：

可能是我不明白我必须在哪里更改“层更大，字体更大”。我做了几个测试，如果我改变了我的滑块： 1/滚动条出现在滑块的底部 2/图片太大 3/按钮/链接在正文下此外，子弹保持较小的尺寸。

见我的网站https://www.assistante-34.com/test.html。我还向您准确地说，我有义务在我的页面属性中添加它，以便我的滑块是全宽的：

<style>

#imPageRowContent_2,
#imPageRow_2 div[id^="imCell"] {
 padding: 0;
 width: 100%!important;
 height: 100%!important;
}
</style>

感谢您的开明帮助。我不习惯使用你知道的代码。问候。丹妮尔

【讨论】：

由于字体大小已经用内联样式指定，然后在css中添加!important。请参阅编辑后的答案。
您好，很遗憾今天发现我的请求已被删除。我很高兴你的帮助，真的（没有批评只有 SOS）......我只是想通过新测试来精确说明，文本在 1920 年的大宽度下显得非常大......我还问了这个问题是否解决问题我无法在 vw 中指定字体的大小，而不是在 px 中...非常感谢您的帮助。问候，丹妮尔
您好，自去年 10 月 24 日以来，我没有收到您的帮助。我不明白小宽度字体大小的问题在哪里。提前谢谢你。丹妮尔法布尔

【解决方案2】：

是的，逻辑是正确的，图层会随着滑块缩放。

您可以通过以下两种方式之一修复它，

使用更大的字体使图层更大。
指定图层的类名（例如yourlayer），编写手动媒体查询css代码来控制图层在各种分辨率下的显示大小。 <style> @media screen and (min-width: 1200px) { .yourlayer { font-size: 50px !important; } } @media screen and (min-width: 600px) { .yourlayer { font-size: 80px !important; } } @media screen and (min-width: 300px) { .yourlayer { font-size: 200px !important; } } </style>

【讨论】：

您好，非常感谢您的回答。如果我有任何进一步的问题，我会试着回复你。问候。丹妮尔 F.
您在移动设备上试用过吗？有什么网址可以看一下吗？