https://github.com/kinolag/imc
image_carousel_v1 (w/ links to A/V works)
https://github.com/kinolag/imc
audiovisual dom-manipulation flexbox-layout image-carousel javascript keyboard-events
Last synced: 3 months ago
JSON representation
image_carousel_v1 (w/ links to A/V works)
- Host: GitHub
- URL: https://github.com/kinolag/imc
- Owner: kinolag
- Created: 2018-12-17T18:52:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-13T13:01:34.000Z (over 6 years ago)
- Last Synced: 2025-01-12T22:46:31.728Z (5 months ago)
- Topics: audiovisual, dom-manipulation, flexbox-layout, image-carousel, javascript, keyboard-events
- Language: CSS
- Homepage: https://kinolag.github.io/imc/
- Size: 32.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# imc
image_carousel_v1Version 1: description
An image carousel that on click returns an image from an array, with additional bits of information:
an image title, a text caption, a hypertext link and its name. The link is useful for applications where each image is related to, or is a presentation for another element (e.g. text page, music or video file).Each image has an associated animation which slightly changes the opacity. The opacity change is in sync with the slider time interval and gives the images a “breathing” feel. On mouse over, the animation is paused.
The carousel is responsive with a flexbox layout. Although I don’t find it essential, keyboard control has been added - including a “key to the keys” for usability (a media query hides this box at certain screen resolutions, rather than for specific devices).
The carousel can be integrated in one of my websites, where it can work as an alternative for a static index page presenting all the images at once. Two different approaches to presenting a collection of items.
I have also imagined a more complex version 2 making use of objects with about 20 properties, which would allow me to manage my video gallery in a more complete and dynamic way.