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
Example:
For 5 Images in the slideshow, WOW Slider created 10 keyframes in the stylesheet:
@keyframeswsBasic{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;
<divid="wowslider-container1">
<divclass="ws_images"><ul>
<li><imgsrc="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><imgsrc="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><imgsrc="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><imgsrc="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!
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:
@keyframeswsBasic{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;
<divid="wowslider-container1">
<divclass="ws_images"><ul>
<li><imgsrc="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><imgsrc="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><imgsrc="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><imgsrc="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!