Saturday, April 12, 2014

WOW Slider image slideshow shows only gray background, animation does not start over, manual editing of css and HTML files

Today i run into the problem that my image slideshow created with WOW Slider showed a gray background after the last Image and it took very look until the slideshow started again at the beginning.

How-I-fixed-it:
I turned out, that I caused the problem by manually editing the css and js files created by WOWSlider. The files have to exactly fit to the number of images defined in the
    part of the html file, because the timing of the whole slideshow is calculated by WOW Slider at the time creating the files. If the number of
  • entries in the
      part of the html-file is changed afterward, it does no longer match the number of keyframes defined in the css Stylesheet.


Example:
For 5 Images in the slideshow, WOW Slider created 10 keyframes in the stylesheet:

@keyframes wsBasic{0%{left:-0%} 14.59%{left:-0%} 20%{left:-100%} 34.59%{left:-100%} 40%{left:-200%} 54.59%{left:-200%} 60%{left:-300%} 74.59%{left:-300%} 80%{left:-400%} 94.59%{left:-400%} }

With this code in the html I was able to reproduce the problem;

<div id="wowslider-container1">

<div class="ws_images"><ul>

<li><img src="data1/images/wp_20140309_20_46_38_pro.jpg" alt="WP_20140309_20_46_38_Pro" title="WP_20140309_20_46_38_Pro" id="wows1_0"/></li>

<li><img src="data1/images/wp_20140329_16_21_24_pro.jpg" alt="WP_20140329_16_21_24_Pro" title="WP_20140329_16_21_24_Pro" id="wows1_1"/></li>

<li><img src="data1/images/wp_20140329_16_21_54_pro.jpg" alt="WP_20140329_16_21_54_Pro" title="WP_20140329_16_21_54_Pro" id="wows1_2"/></li>

<li><img src="data1/images/wp_20140329_16_23_04_pro.jpg" alt="WP_20140329_16_23_04_Pro" title="WP_20140329_16_23_04_Pro" id="wows1_3"/></li>





 
 
</ul></div>

 When manually editing the WOW Slider HTML code, be sure, the number of images is not changed!

No comments:

Post a Comment