Jssor slider does not start automatically

Question

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 ie any px value ( width=960px ) it works fine however the width reduces.

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. eg 'width: 600px;' jssor.slider.js:1952

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

Answer 1

use this and set autoplat in true mode

var options = {
        $AutoPlay: false,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
        $AutoPlayInterval: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
        $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1

        $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
        $SlideDuration: 300,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
        $MinDragOffsetToSlide: 80,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
        //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
        //$SlideHeight: 150,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
        $SlideSpacing: 3,                                   //[Optional] Space between each slide in pixels, default value is 0
        $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
        $Align: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
        $UISearchMode: 0,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
        $PlayOrientation: 2,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
        $DragOrientation: 0, 

Answer 2

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