Search code examples
javascriptjqueryhtmlcssjssor

JSSOR Slider not visible

I try to integrate the "JSSOR Image Slider" into a new webpage. I want to use the demo at http://pur-regional.de/test/demos-jquery/simple-fade-slideshow.source.html

My Webpage is managed by Contao. In my HTML, I have a DIV (class="six-nineteen") wich keeps a 16:9 ratio when you are resizing the width of the webpage. I want that the slider runs in that DIV. But I do see nothing. No images, no fading, only nothing.

I have uploaded a standalone demo version of my try at http://pur-regional.de/test/Slider.htm. If the slider would run properly, it would appear below "Column 2".

  1. The markup for the slider-DIVs starts at row 120
  2. The JS-Code for the slider starts at row 202

I don't get what I am doing wrong here. I would be happy, if you point me the location(s) where I do wrong.

Solution

  • width of slides container should be 200px instead of 200.

    Please replace

    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 200; height: 112px;

    with

    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 200px; height: 112px;