RoyalSlider Not AutoResize Images
<p>I have been looking at the documentation for over an hour and I cannot understand why my implementation of Royal Slider is not auto resizing images. Below is an example of the sizing feature which I would like to accomplish.</p>

<p><a href="http://dimsemenov.com/plugins/royal-slider/visible-nearby/" rel="nofollow">http://dimsemenov.com/plugins/royal-slider/visible-nearby/</a></p>

<p>And this is the documentation presented for the slider. </p>

<p><a href="http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp#options" rel="nofollow">http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp#options</a></p>

<p>What am I possibly doing wrong here?</p>

<pre><code>        jQuery(document).ready(function($) {
        $(".royalSlider").royalSlider({
            transitionType: 'fade',
            autoScaleSlider: true,
            autoScaleHeight: true,
            autoScaleSliderHeight: 320,
            autoScaleSliderWidth: 525,          
        });  
    });
                &lt;div class="carousel programs"&gt;
                &lt;div class="royalSlider rsDefault"&gt;
                    &lt;div class="content_wrapper"&gt;
                        &lt;div class="image"&gt;&lt;img alt="slider_01" title="slider_01" src="images/campus_programs/lifestyle_shots/lifestyle01.jpg"&gt;&lt;/div&gt;
                        &lt;div class="text"&gt;&lt;p&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, erat id commodo lobortis, ipsum dui gravida mauris, at scelerisque.&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="content_wrapper"&gt;
                        &lt;div class="image"&gt;&lt;img alt="slider_01" title="slider_01" src="images/campus_programs/lifestyle_shots/lifestyle01.jpg"&gt;&lt;/div&gt;
                        &lt;div class="text"&gt;&lt;p&gt;&lt;span&gt;fhjfhhf.&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
                    &lt;/div&gt;                      
                &lt;/div&gt;  
            &lt;/div&gt;
</code></pre>

<blockquote>
  <p>.rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault
  .rsVideoFrameHolder, .rsDefault .rsThumbs { position: relative; }
  .rsDefault .rsArrow { width: 40px; height: 40px; } .rsDefault
  .rsBullets { display: none; } .rsDefault  .rsContainer  { position:
  relative; left: 20px; top: 10px; }</p>
  
  <h1>body_wrapper .carousel { width: 100%; height: 100%; overflow: hidden; }</h1>
  
  <h1>body_wrapper .carousel .content_wrapper { width: 485px; height: 270px; background-color: #afafaf; }</h1>
  
  <h1>body_wrapper .carousel .content_wrapper .text { position: absolute; width: inherit; height: 25px; bottom: -30px; color: #fff; font-size:</h1>
  
  <p>12px; line-height: 12px; font-weight: bold; background-color: #000; }</p>
</blockquote>
