3

我正在尝试在我的网站中实现一个 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/

4

1 回答 1

1

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

  • 在 .unslider ul 中添加：

    显示：列表项；左填充：0；

  • 在 .unslider li 中添加：

    左填充：0；

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

于 2012-05-05T17:35:32.973 回答