• For review GitHub Pages

Carousel

1. Create a 1300 pixel-wide container and put there 10 images from the img/ folder so that they are all in the same row. Each of the images is 130×130 pixels.

2. Change the width of the container to 260 pixels and use the overflow CSS property to hide all the images but the first two.

3. Place a button under the container. When the user presses the button, scroll the container horizontally with JavaScript so that it shows the next two images. You can do it without any animations. Use the scrollLeft JS property of the container.

4. Place another button just below the first one. The first button, "Next", should still display the next two items each time it is clicked, while the second one, "Previous", must do the opposite: return to the previous two images. When there are no images left to display, just do nothing.

5. Now change the width of the container to 390 pixels and do the same thing with three images being shown instead of two. You need to carefully handle the case when there are less than three images left to display. So, when you’re showing images 7-9 and click the button "Next", display 8-10. Similarly, when showing 2-4 and click "Previous", display 1-3.

6. Finally, add some horizontal spacing between the images and move the buttons to the left ("Previous") and right ("Next") sides of the container. Style them so that they look like arrows. Add a disabled class and style a button with this class accordingly if clicking the button would have no effect (i.e., there are no more images to display).