jQuery slider 不适用于网站

Question

我正在尝试在我的网站中实现一个 jQuery slider 来制作一个元素页面。我已经实现了 jQuery 和代码，但不知何故它不起作用。但是，当我使用 Google Chrome 查看“检查元素”并使用箭头键移动 slider 时，它会显示每次按下时移动的数字。所以这意味着 slider 正在工作，但同时它没有移动图像。

http://www.dig.ital.me/projects/

会不会是因为我用的是Wordpress？

<ul style="width: 3680px; left: -920px; "><li class="cloned"><img src="http://dig.ital.me/img/cdnbox/2012/05/test.png" alt="" title="work_page_timeline" width="920" height="384"></li>
                <li class="active"><img src="http://dig.ital.me/img/cdnbox/2012/03/work_page_timeline.jpg" alt="" title="work_page_timeline" width="920" height="384"></li>
                <li class=""><img src="http://dig.ital.me/img/cdnbox/2012/05/test.png" alt="" title="work_page_timeline" width="920" height="384"></li>
            <li class="cloned"><img src="http://dig.ital.me/img/cdnbox/2012/03/work_page_timeline.jpg" alt="" title="work_page_timeline" width="920" height="384"></li></ul>

这是来自 inspect element 的代码，向我展示了它的 -left 920px，当按下左箭头键或右箭头键时，它会移动。但是由于某些奇怪的原因，图像没有移动，我似乎无法弄清楚原因。

这里还有一些源代码。

    <!-- START HERE FOR PORTFOLIO & DISPLAY WORK -->
    <div id="slider">
            <ul>
                <li><img src="http://dig.ital.me/img/cdnbox/2012/03/work_page_timeline.jpg" alt="" title="work_page_timeline" width="920" height="384" /></li>
                <li><img src="http://dig.ital.me/img/cdnbox/2012/05/test.png" alt="" title="work_page_timeline" width="920" height="384" /></li>
            </ul>

    </div>
    <!-- END PORTFOLIO -->

    <script src="http://www.dig.ital.me/wp-content/themes/mytheme/Scripts/unslider.js"></script>
    <script type="text/javascript">

        $(function() {
            //  Wow, that's it?
            $('#slider').unslider();
        });

    </script>

我正在使用这个 slider http://unslider.com/

Answer 1

看起来您需要解决 unslider.css 中的几个 CSS 问题:

• 到.unslider ul，添加:

  显示:列表项；padding-left: 0;

• 到.unslider li，添加:

  padding-left: 0;

刚刚尝试通过此处的 Chrome 开发工具对其进行编辑，它似乎已经成功了:)