-
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.
-
Change the width of the container to 260 pixels and use the
overflow
CSS property to hide all the images but the first two. You may alternatively want to use another wrapper container for that and set the new width and theoverflow
property to the wrapper instead of the inner container which will keep its width of 1300px. -
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. Suggested method is to use transform translate on container.
-
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.
-
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.
-
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).
dom_carousel's Introduction
dom_carousel's People
Forkers
konstvolkovnitsky b-antonenko stasgostev olhamazurenko ilovepinkpony1 vladimirti yevhen-kryvdiuk ekaterinakur valeraonisko dvitalijb annakondr lozytskyia batsenko alexhladun gulldan1996 nikita-kiev sherjlok15 rmasnyuk anyalisna vdimition roman-mate ronyshchenko stu-dying volodymyr-roiuk nazarroshchuk oksanatyshchenko andrik264 dominosl bogdan-kutasevich izzetyusufov bohdan-mykhailenko g37ua elenagrasovskaya khvashchenkodenys viktoriia-vita afesh4ak anastasiachaikovskaya dvaselevsliy ihorromeRecommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.