jQuery滑块不适用于网站

Question

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

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>

这是来自检查元素的代码，它向我显示它的 -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>

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

Answer 1

看来您需要在 unslider.css 中对几个 CSS 问题进行排序：

• 到.unslider ul，添加：

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

• 到.unslider li，添加：

  padding-left: 0;

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