Is full width carousel possible?

Question

I would like to make the Jssor Carousel full width, without resizing height at all when the window resizes. So on a wide screen, it would show more slides and on a narrow screen it will show less, without ever changing height. I don't want the slider to resize, I just want it to cut off, if that makes sense.

So far I've got it working as I'd like in Firefox, Chrome, Safari and Opera. If I'm not explaining it very well, I apologize, you can see an example of how I'd like it to work here: http://jessetessman.com/110/slider.php in Firefox, Chrome, Safari or Opera. Note, when you resize the window you have to refresh to resize the slider.

My problem is, it doesn't work in IE. It just has a width of 100px in IE and I have no idea how to get it working.

I appreciate any help you can give. I realize the way I have it now is probably not the best way to go about accomplishing this, but I am not very good with javascript so I just messed with it until I got to this point. Any suggestions about better ways to do this are certainly welcome.

Thank you in advance for the help.

Answer 1

Please add one line $("#news-slider").width("100%");

        var jssor_slider1 = new $JssorSlider$("news-slider", options);
        $("#news-slider").width("100%");

Forgot to change following css, make the width to greater than screen width then.

#news-slider {
    left: 0px; top: 0px; width: 2400px; height: 350px; overflow: hidden; position: relative;
}
#news-slider .slides {
    left: 0px; top: 0px; width: 2400px; height: 350px; overflow: hidden; z-index: 0;
}