jquery move clicked list item to first visible item in list carousel

Question

jquery move clicked list item to first visible item in list carousel

930 Views Asked by d8nieldonaldson At 04 April 2025 at 16:03

hey i have a carousel of list items, what i would like to be able to do is when the user clicks on a list item (say the 4th visible item on the list) the clicked item scrolls left and ends up in the first visible position.

oh, i'm using the jCarousel plug-in to make the carousel work.

i've got a link:

link

not really sure how to even begin, any ideas?

thanks!

Original Q&A

There are 1 best solutions below

**Barrie Reader** · Answer 1

Here is my carousel, which may help (it has click events and animations):

<html>
    <head>
        <title></title>
        <style type="text/css">
            #wrapper { width: 300px; overflow: hidden; height: 100px; min-height: 100px; position: relative; margin: 0; padding: 0;  }
            #ul { width: 9999px; height: 100px; position: absolute; margin: 0 auto; padding: 0; text-align: center;  }
            .li { float: left; list-style-type: none; position: relative; margin: 0 auto; padding: 0;  }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                for (var i = 24; i > 0; i--) {
                    $('#ul').append('<li class="li" style="z-index: '+i+'"><img src="http://www.jamesgraygallery.com/artimages/Mee%20Kyung%20Shim/slides/Last%20Summer,50x50.jpg" alt="'+i+'" width="100" height="100"</li>');
                }

                $('#ul').css({ //Reset the carousel to the center
                    'left': -($('.li').size()*$('.li').width())/2
                });

                var howMany = $('.li').size();
                var halfIt = howMany/2;
                var merp = $('.li').index('#ul');

                $('#right').click(function() {  //Right button
                    $('#ul').animate({
                        left: '-='+($('.li').width()*3) //Move the images
                    }, 500);
                    return false;
                });

                $('#left').click(function() {  //Left button
                    $('#ul').animate({
                        left: '+='+($('.li').width()*3) //Move the images
                    }, 500);
                    return false;
                });

            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <ul id="ul">

            </ul><br />
        </div>
        <a href="#" id="right">right</a>&nbsp;&nbsp;<a href="#" id="left">left</a>
    </body>
</html>

This should be a good place to get you started. ^_^

note: This will not give you the CLICK-TO-ANIMATE function you require, but I can't do it all for you can I? :)

jquery move clicked list item to first visible item in list carousel

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in JCAROUSEL

Trending Questions

Popular # Hahtags

Popular Questions