Question

我的问题是标题。我的滑块反应灵敏，但在小分辨率下无法正确读取任何内容。目前，我将其放在网站的测试页中： 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 -->

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

关于，丹妮尔（Danielle F。）

Answer 1

是的，逻辑是正确的，图层将随滑块一起缩放。

您可以通过以下两种方式之一对其进行修复，

使用更大的字体将图层放大。
指定图层的类名称（例如 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>

Answer 2

可能是我不知道该在哪里更改“较大字体较大的图层”。我进行了几次测试，如果更改了滑块，请执行以下操作： 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>

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

JSSOR我的滑块分辨率太小

2 个答案: