Jssor滑块不会自动启动

时间:2015-04-29 13:11:27

标签: javascript css jssor

这是我的代码;滑块不会自动启动:

<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;">

我认为这可能是因为父div中的width=100%。当我将宽度更改为960px,即任何px值(width=960px)时,它工作正常,但宽度减小。

供参考的屏幕截图

Screenshot for reference

修改

http://pixelcreations.in/parking/链接供参考

自动播放已设为真

宽度设置为100%时控制台出错

未捕获错误:无法缩放jssor滑块,未指定“外部容器”的“宽度”。请以像素为单位指定“宽度”。例如'宽度:600px;' jssor.slider.js:1952

未捕获的TypeError:无法读取未定义的属性'$ EnablePlayer'

2 个答案:

答案 0 :(得分:0)

使用此功能并在真实模式下设置autoplat

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, 

答案 1 :(得分:0)

您正在将滑块的宽度设置为可用宽度的70%。

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

所以我把它改为:

var sliderWidth = availableWidth * 1;

或者更好:

var sliderWidth = availableWidth;

检查此弹射器:http://plnkr.co/edit/mw58px1v1ZhR3IuAmG2C?p=preview