Image carousel in 10 lines of code or so [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 8 years ago.

Improve this question

I'm a PHP/MySQL guy with a front end problem. I've set up a loop that returns 20 list items which are images that are stacked horizontally. Now, I'd appreciate help with some jQuery code that does two things:

I. Displays only 4 of the 20 items — image 1, 2, 3, 4.

II. On a click event:

(a) If the 'next' button is clicked, slide in the next set of four slides into view, i.e image 5, 6, 7, 8. When 'next' is clicked again, slide in image 9, 10, 11, 12 and so on.

(b) If the 'previous' button is clicked, slide in the previous set of four slides...

How can this be done? And if it takes more than 10 lines, please provide the code or links to it.

Answer 1

First of all you would need to do some css modifications, where the css would only allow 4 of the 20 items to be shown at a time.

#image-container { width: 800px; overflow: hidden; }

the above code is assuming the image container as the ID , and is assuming that each of the pictures is 200px wide. The overflow hide would then hide anything greater than the 800px , so only four images would show.

Secondly, you would want to use jQuery for the on click event and your code would look something like this..

$(document).ready(function(){
    $('#next-button').click(function(){
        $('img:first-child').animate({left: '-200px'}, 800);
});
});

You would have to set this up very precisely and requires a good deal of knowledge of html/css/and jquery. Or you could find a plug in to do most of the hard work for you. The above jQuery code is just an example and what you're trying to do would include at least 3-5 times the amount of jQuery than I posted.