视差内容滑块自动播放不起作用答案

【问题标题】：Parallax content slider autoplay not working视差内容滑块自动播放不起作用
【发布时间】：2014-06-30 15:16:22
【问题描述】：

视差内容滑块可以工作一次，但随后无法正常工作，没有任何错误。这是示例 http://vilamihu.didacticmedia.ro/ ，下面是重要的代码：

 <script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
    <!--end slider -->
    <!---strat-date-piker---->
    <link rel="stylesheet" href="css/jquery-ui.css"/>
    <script src="js/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker,#datepicker1").datepicker();
        });
    </script>
    <!---/End-date-piker---->
    <!--<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />-->
    <link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
    <script type="text/javascript" src="js/JFCore.js"></script>
    <script type="text/javascript" src="js/JFForms.js"></script>
    <script type="text/javascript" src="js/jquery.cslider.js"></script>

那些在<head>。这是正文：

 <div id="da-slider" class="da-slider">
        <div class="da-slide">
            <div class="da-img">
                <img src="images/slideprimu.jpg" alt="" class="class1" />
            </div>
        </div>

        <div class="da-slide">
            <div class="da-img">
                <img src="images/slide1.jpg" alt="" class="class1"/>

            </div>

        </div>

        <div class="da-slide">
            <div class="da-img">
                <img src="images/slide2.jpg" alt="" class="class1"/>
            </div>
        </div>

        <div class="da-slide">
            <div class="da-img">
                <img src="images/slide3.jpg" alt="" class="class1"/>
            </div>
        </div>

        <div class="da-slide">
            <div class="da-img">
                <img src="images/slide4.jpg" alt="" class="class1"/>
            </div>
        </div>

        <div class="da-slide">
            <div class="da-img">
                <img src="images/slide5.jpg" alt="" class="class1"/>
            </div>
        </div>

        <div class="da-slide">
            <div class="da-img">
                <img src="images/slide6.jpg" alt="" class="class1"/></div>
        </div>

        <!--/slide -->
    </div>

这里是 jquery：

 $(document).ready(function () {
        $('#da-slider').cslider({

            current: 4,
            // index of current slide

            bgincrement: 50,
            // increment the background position
            // (parallax effect) when sliding
            circular: true,
            autoplay: true,
            // slideshow on / off

            interval: 500
            // time between transitions

        });
    });

注意：图片的链接很好。如果我更改“当前”设置，那么它将从那张照片开始，走一次，然后停止。任何想法将不胜感激！谢谢！

【问题讨论】：

您的网站不可用
是的，我知道，合同刚刚到期，过几天会付款..sorry
您的网站再次运行（是的！），但您还没有说明如何重现问题。哪个页面和什么操作会导致它？
简单。进入第一页并观察滑块！它切换照片，就是这样。滑块中加载了 6 张图片。但只有一个过渡有效
你推荐Old Post

标签： javascript jquery slider parallax

【解决方案1】：

试试这个

$(document).ready(function () {
    $('#da-slider').cslider({

        current: 4,
        // index of current slide

        bgincrement: 50,
        // increment the background position
        // (parallax effect) when sliding
        circular: true,
        autoplay: true,
        // slideshow on / off

        intervalSec: 500
        // time between transitions

    });
});

我刚刚将值的名称 interval 更改为 intervalSec

根据documentation 其他的应该没问题

另外在提供的网站链接中，您使用的是旧版本的 jQuery v1.8.3 如果可能的话更新到最新版本CDN，至于CSS3新版本效果更好（注意：不支持一些旧浏览器）

更新：在给定的网站链接中，使用了两个不同版本的 JQuery UI

请删除旧版本（js/jquery-ui.min.js）以避免任何冲突..

【讨论】：

将尝试使用新版本的 jquery
还有一件事，你的网站同时调用 jquery-UI 和 jqueryUI.min ，即它被调用了两次，所以删除一个实例
在线版本现在更改一两个图像然后停止，所以我认为它的内部 jquery 冲突尝试删除应该有帮助的两个 UI 之一
我最后使用了另一个滑块..无论如何都会给你赏金;）

【解决方案2】：

今天我试图解决完全相同的问题。

尽管可能不再需要此答案，但我会为遇到相同问题的其他编码人员添加它。

根本原因在于 bgincrement 值。如果没有可以“移动”的背景，它将停止响应而不会出现任何错误。而且一团糟。

将 bgincrement 设置为零使滑块再次工作：

$(document).ready(function () {

    $('#da-slider').cslider({
        autoplay    : true,
        bgincrement : 0
    });
});

【讨论】：

【解决方案3】：

我有同样的问题...请停用所有其他 jquery 插件，只让滑块到位。不要忘记删除自定义 js 文件或 html 文件中的启动代码！通常，您的滑块毕竟可以在线工作。然后您可以逐步重新添加插件，您将识别出您的滑块与哪个插件不兼容。我有 jQuery Timelinr 0.9.54 插件阻止了我的滑块。

【讨论】：