Search code examples
javascriptcssjssor

Jssor slider does not start automatically

Here my code; the slider does not start automatically: 

<div id="slider" style="position: relative; margin: 0px;  top: 0px; left: 0px; width: 100%;  height: 300px; overflow: hidden;">
            <div   u="slides" style="cursor: default;  width: 960px; height: 300px;overflow: hidden;">

I think this could be because of the width=100% in the parent div. When I change the width to 960px i.e. any px value (width=960px) it works fine however the width reduces.

Screenshot for reference

Screenshot for reference

EDIT:

http://pixelcreations.in/parking/ link for reference

Autoplay is already set to true

Error in console when width is set to 100%

Uncaught Error: Cannot scale jssor slider, 'width' of 'outer container' not specified. Please specify 'width' in pixel. e.g. 'width: 600px;' jssor.slider.js:1952

Uncaught TypeError: Cannot read property '$EnablePlayer' of undefined

Solution

  • You are setting the width of the slider 70% of the available width.

    //calculate slider width as 70% of available width
var sliderWidth = availableWidth * 0.7;

    So I changed that to :

    var sliderWidth = availableWidth * 1;

    Or much better :

    var sliderWidth = availableWidth;

    Check this plunker: http://plnkr.co/edit/mw58px1v1ZhR3IuAmG2C?p=preview