【问题标题】:Jssor slider does not start automaticallyJssor 滑块不会自动启动
【发布时间】:2017-07-04 21:10:53
【问题描述】:

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

<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)时,它工作正常,但宽度减小。

截图供参考

编辑:

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

自动播放已设置为 true

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

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

未捕获的类型错误:无法读取未定义的属性“$EnablePlayer”

【问题讨论】:

  • 你有一些小提琴,我们可以看看吗?
  • 嗨罗宾,你可以参考这个链接。 pixelcreations.in/parking .. 感谢您的宝贵时间。 :)
  • 谢谢,看看我下面的回答。
  • 接受先生.. :) 再次感谢您的时间.. :)
  • 太棒了!很高兴为您提供帮助!

标签: javascript css jssor


【解决方案1】:

您将滑块的宽度设置为可用宽度的 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

【讨论】:

  • 谢谢罗宾;但是必须在那里再做一次更改..sliderWidth = Math.min(sliderWidth, 960); 将最大滑块宽度更改为 960 像素..
【解决方案2】:

使用它并将 autoplat 设置为 true 模式

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, 

【讨论】:

  • 你在里面放了太多的js,这就是jquery和其他的冲突的原因。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多