3

プロジェクトページを作成するために、jQuery スライダーを Web サイトに実装しようとしています。jQuery とコードを実装しましたが、どういうわけか機能しません。ただし、Google Chrome を使用して「inspect-element」を表示し、矢印キーを使用してスライダーを移動すると、押すたびに数値が移動することが示されます。つまり、スライダーは機能していますが、同時に画像を動かしていません。

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

ワードプレスを使っているからでしょうか？

<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/

4

1 に答える 1

1

unslider.css でいくつかの CSS の問題を分類する必要があるようです。

  • .unslider ul に、次を追加します。

    表示: リスト項目; パディング左: 0;

  • .unslider li に、次を追加します。

    パディング左: 0;

こちらのChrome開発ツールで編集してみましたが、うまくいったようです:)

于 2012-05-05T17:35:32.973 に答える