css - 基于窗口宽度的 Jssor slider 可变宽度

Question

是否可以根据窗口大小(媒体查询)将幻灯片更改为固定宽度？我不希望它缩放或处于 percetange，只是根据窗口大小固定宽度。

例如这样的东西

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

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

大 -> 小(幻灯片较小) -> 大(幻灯片较大)

但不是这样

小 -> 大(幻灯片仍然很小)-> 没关系

感谢回复

编辑:

这是我的代码

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 block 并为各种媒体屏幕指定不同的大小是正确的。

请注意， 按照您提到的方式，jssor slider 将保持初始大小，不会根据窗口大小调整。

顺便说一句，下面的代表什么？

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

but not this way

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

编辑

请启用响应式代码并在 ScaleSlider 函数中指定逻辑来缩放 slider 而不是 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