Question

I’m trying to implement a jQuery slider into my website to make a projects page. I’ve implemented the jQuery and code and somehow it isn’t working. However, when I view “inspect-element” using Google Chrome and I use the arrow keys to move the slider it shows the numbers moving every-time its being pressed. So that means the slider is working, but at the same time its not moving the images.

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

Could it be because I am using 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>

This is the code from inspect element showing me that its -left 920px, and when the left or right arrow key is pressed down, it moves. But for some odd reason the image isn’t moving which I can’t seem to figure out why.

Also here’s some source code.

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

I’m using this slider http://unslider.com/

Answer 1

Looks like you need to sort a couple of CSS issues in unslider.css:

• to .unslider ul, add:

  display: list-item;
  padding-left: 0;

• to .unslider li, add:

  padding-left: 0;

Just tried editing it through Chrome dev tools here, and it appears to have done the trick 🙂