Question

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

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元素的代码，向我显示它的-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，添加：

display：list-item; padding-left：0;
到.unslider li，添加：

padding-left：0;

刚刚尝试通过Chrome开发工具对其进行编辑，似乎已经完成了这一操作：）

jQuery滑块不能与网站一起使用

1 个答案: