Making an inline css to be more powerful than an external !important?

Making an inline css to be more powerful than an external !important?

I have a slider script and a template external stylesheet, both I MUST
use. I was instructed to just use a custom.css to override the template
external stylesheet.
My problem is, the slider css in the template has an !important. The
slider script calculates the width and height of the images and inserts it
through inline css. I want the inline css to take more power in the
cascade rather than the !important in the template stylesheet.
For example:
In html doc, after it load the slider script:
<img src="slide1.jpg" style="width: 980.2545515px;" />
In template stylesheet:
img {
width: 500px !important;
}
I tried using jquery such as:
$("img").css("width","500px");
However, it doesn't override anything. Note that I need the automatically
generated width to override anything. But I can't seem to find a way to
override the width: 500px !important - width: auto/width: inherit doesn't
work neither.
Any solutions?