Carousel

From BC$ MobileTV Wiki
Jump to: navigation, search

The Carousel widget is a (by now) well-known page/application component which produces the effect of horizontally scrolling content. The content can be configured to scroll both automatically, and as a response to a mouse click or key press.


Types

  • Should I Use a Carousel: https://shouldiuseacarousel.com/ (sarcastic website that points out inaccessibility of them, and, how Carousels also fall short most of the time on marketing/impression/conversion goals)

Single-item

Slider

[1] [2] [3] [4] [5] [6] [7] [8]

Gallery

See: Gallery

Multi-item

[9] [10]

2D Carousel

[11] [12] [13]

3D Carousel

Multi-Slider



Resources

[14] [15] [16]


Tutorials

External Links

References

  1. Responsive DIV Carousel With Pure CSS: https://www.cssscript.com/responsive-div-carousel-pure-css/
  2. Card Carousel photo pile example: https://www.cssscript.com/demo/card-carousel-tinder/
  3. Background fullscreen image slider example: https://www.cssscript.com/demo/cross-slide-background-carousel/
  4. SimpleSlider.js: https://www.cssscript.com/demo/basic-responsive-background-slider-pure-javascript-simpleslider/
  5. CSS Clip Path fullscreen slider: https://www.cssscript.com/demo/carousel-css-clip-path/
  6. Embla -- Extensible low level carousels for the web, written in TypeScript: https://davidcetinkaya.github.io/embla-carousel/
  7. SLIDR -- Responsive fullscreen carousel: https://www.cssscript.com/demo/responsive-carousel-slidr/
  8. CoverFlow Carousel Example: https://www.cssscript.com/demo/flip-element-carousel/
  9. Responsive CSS Only Carousel Slider Demo: https://frontendscript.com/demo/responsive-css-only-carousel-slider/
  10. Elder Carousel Example: https://www.cssscript.com/demo/infinite-multi-slide-elder-carousel/
  11. 10 Free Pure CSS & Carousel Sliders : https://speckyboy.com/open-source-carousel-sliders-css/
  12. Shuffling Card Carousel: https://www.cssscript.com/demo/shuffling-card-carousel/
  13. React Carousel: https://express-labs.github.io/pure-react-carousel/
  14. Top 10 Javascript slideshows, carousels and sliders: http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders
  15. Flash Carousel & JavaScript LightBox 2.0: https://web.archive.org/web/20130115195743/http://flshow.net/carousel/lightbox/
  16. Lightbox 2.0: https://lokeshdhakar.com/projects/lightbox2/

See Also

JS | CSS3 | AJAX | Gallery