Jssor slider variable width based on window width

Question

It is possible to change slides to fixed width based on window size (media queries)? I don't want it to scale or be in percetange, just fixed width depending on window size.

For example something like this

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

Because right know, it always has inline style based on window width in the beginning and can do nothing with it. I tried to use !important in css, but it only works this way

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

but not this way

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

Thx for response

EDIT:

this is my code

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

You are doing right to move inline styles to css block and specify different size for various media screen.

Please note that, in the way you mentioned, jssor slider will keep initial size, it will not scale according to window resize.

btw, what is the following stand for?

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

but not this way

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

Edit

Please enable responsive code and specify logic in ScaleSlider function to scale your slider instead of css rules.

//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