Question

可以根据窗口大小（媒体查询）将幻灯片更改为固定宽度吗？我不希望它缩放或处于感知状态，只是根据窗口大小固定宽度。

例如像

这样的东西

@media screen and (min-width: 320px) {
   .slides {
      width: 200px;
   }
}
@media screen and (min-width: 980px) {
   .slides {
      width: 600px;
   }
}

因为正确知道，它始终在开头时基于窗口宽度具有内联样式，并且无法对其执行任何操作。我尝试在css中使用！important，但它只能这样工作

大 - ＆gt;小（幻灯片较小） - ＆gt;大（幻灯片更大）

但不是这样

小 - ＆gt;大（幻灯片仍然很小） - ＆gt;没关系

响应的答案

修改

这是我的代码

HTML：

<div id="slider1_container" class="slider1_container">
    <div u="slides" id="selectedImg">
       {% for item in info.photos %}
          <div class="sliderImgs">
             <img u="image" src="{{ item|url_for_static }}" class="sliderImgs"/>                                                                        
              <img u="thumb" src="{{ item|url_for_static }}"/>
           </div>
        {% endfor %}
    </div>
<div u="thumbnavigator" class="jssort07">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" id="thumbnailSlides">
     <div u="prototype" class="p">
          <div u="thumbnailtemplate" class="i"></div>
          <div class="o"></div>
     </div>
</div>
</div>
     <span u="arrowleft" class="leftArrow"></span>
     <span u="arrowright" class="rightArrow"></span>
 </div>

CSS：

@media screen and (min-width: 320px){
.leftArrow, .rightArrow {
    position: absolute;
    top: 205px;
    height: 52px;
    width: 15px;
    cursor: pointer;
}
.leftArrow {
    left: 10px;
    background: url('/static/images/sprite320.png') -92px -3px;
}
.rightArrow {
    right: -10px;
    background: url('/static/images/sprite320.png') -114px -2px;
}
.jssort07 {
    position: relative;
    top: 476px;
}
.slider1_container {
    position: relative;
    width: 298px !important;
    height: 460px !important;
    margin-top: 20px;
    margin-bottom: 15px;
}
#thumbnailSlides {
    display: none;
    background-color: black;
}
#selectedImg {
    position: absolute;
    top: 0;
    left: 77.5%;
    width: 298px !important;
    height: 446px !important;
    margin-left: -220px;
    overflow: hidden;
}
.sliderImgs {
    max-width: 298px !important;
    max-height: 446px !important;
}
}
@media screen and (min-width: 768px){
.leftArrow, .rightArrow {
        position: absolute;
        top: 215px;
        height: 104px;
        width: 31px;
        cursor: pointer;
    }
    .leftArrow {
        left: 50px;
        background: url('/static/images/imagesprite.png') -219px -8px;
    }
    .rightArrow {
        right: 115px;
        background: url('/static/images/imagesprite.png') -268px -8px;
    }
    .jssort07 {
        position: relative;
        top: 676px;
        max-width: 600px;
        height: 116px;
    }
    .jssort07 .p {
        width: 80px;
        height: 116px;
    }
    .jssort07 .pav {
        opacity: 0.8;
    }
    .jssort07 .i {
        width: 80px;
        height: 116px;
    }
    .slider1_container {
        width: 593px !important;
        height: 794px !important;
        margin-bottom: 15px;
    }
    #thumbnailSlides {
        display: block;
        left: 25px;
        height: 116px;
        background-color: black;
    }
    #selectedImg {
        position: absolute;
        top: 0;
        left: 44.5%;
        width: 439px !important;
        height: 657px !important;
        margin-left: -220px;
        overflow: hidden;
    }
    .sliderImgs {
        max-width: 439px !important;
        max-height: 657px !important;
    }
}

Answer 1

您正确地将内联样式移动到css块并为各种媒体屏幕指定不同的大小。

请注意，在你提到的方式中，jssor滑块将保持初始大小，它不会根据窗口调整大小进行缩放。

顺便问一下，以下是什么？

big -> small (slides are smaller) -> big (slides are bigger)

but not this way

small -> big (slides are still small) -> doesn't matter

修改

请启用自适应代码并在ScaleSlider函数中指定逻辑以缩放滑块而不是css规则。

//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) { var sliderWidth = bodyWidth; if (bodyWidth >= 980) { sliderWidth = 600; } else if (bodyWidth >= 320) { sliderWidth = 200; } jssor_slider1.$ScaleWidth(bodyWidth); } else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); //responsive code end

Jssor滑块可变宽度基于窗口宽度

1 个答案: