Question

I’m probably missing something really simple but I just can’t get this to work! I’ve based it on this question – Horizontal scrolling div using buttons

It doesn’t scroll left or right.

I’ve also got this error:

Also when the links are clicked the page reloads/jumps, is there a way to fix that?

                <div id="imgThumbs" class="scroller" style="height:97px;width: 306px; overflow: hidden; white-space: nowrap;">
                    <a href="#" id="left-button">Left</a>  
                    <a href="#" id="right-button">Right</a>
                    <div id="contentScroller">                         
                    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
                        <a href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
                            <img class="image-<?php echo $counter; ?>" src="<?php echo the_sub_field('image'); ?>" width="90" height="68" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
                        </a>
                    <?php $counter++; endwhile; ?>
                    </div>
                </div>

                <script>
                jQuery(document).ready(function ($) {
                        $('#right-button').click(function {
                            $('#contentScroller').animate({
                            marginLeft: -="306px"
                            }, "fast");
                        });
                        $('#left-button').click(function {
                            $('#contentScroller').animate({
                            marginLeft: +="306px"
                            }, "fast");
                        });                     
                    });
                    </script>

UPDATE

I just found something else… you’re able to keep scrolling left and right even when the content ends. So if there’s 6 images in there, it shows the first 3, click right, shows the next 3, click right and it scrolls to an empty area, click again and so on. Is there any way to fix that?

Answer 1

In your click handler, function { should be function() {.

marginLeft: -="305px" is incorrect. The -= needs to go inside the quotes. marginLeft:"-=305px"

UPDATE

I didn’t test this, but basically what you need to do is make sure that you are not at the end of the left or right before doing the animation. You may need to make some modifications to this for your application, but it should give you the basic idea.

jQuery(document).ready(function ($) {
    $('#right-button').click(function() {
        if($('#contentScroller').css('marginLeft') > 0){
            $('#contentScroller').animate({
                marginLeft: "-=306px"
                }, "fast");
             });
         }

    $('#left-button').click(function() {
         if($('#contentScroller').css('marginLeft') < -1 * $('#contentScroller').width()){
            $('#contentScroller').animate({
                marginLeft: "+=306px"
                }, "fast");
            });                     
         }
    });
});