https://github.com/cedpoilly/fec-slideshow

Web Component version of a HTML + CSS slideshow from this article: https://mrsunshyne.gitlab.io/blog/a-slideshow-using-css-animations-custom-properties
https://github.com/cedpoilly/fec-slideshow

css css-custom-properties html javascript web-component

Last synced: about 2 months ago
JSON representation

Web Component version of a HTML + CSS slideshow from this article: https://mrsunshyne.gitlab.io/blog/a-slideshow-using-css-animations-custom-properties

• Host: GitHub
• URL: https://github.com/cedpoilly/fec-slideshow
• Owner: cedpoilly
• Created: 2019-12-09T17:11:49.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-11T19:48:08.000Z (about 5 years ago)
• Last Synced: 2023-07-27T20:50:51.850Z (over 1 year ago)
• Topics: css, css-custom-properties, html, javascript, web-component
• Language: JavaScript
• Homepage: https://cedpoilly.github.io/fec-slideshow/
• Size: 2.93 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Front-End Coders Slideshow

An experimental web component based of an article found online (link will be available soon).

## HTML & CSS, No JavaScript

In the article no JavaScript was needed, thus for the slideshow functionality itself no JavaScript is required.

However when consuming the component JavaScript is required to set the images.

See the content of the body for this demo:

```html

  .fec-slideshow {

    height: 100vh;

    width: 100%;

  }

  const slideshow = document.querySelector(".fec-slideshow");

  slideshow.preload = true;

  const images = [

    "https://picsum.photos/id/231/1000/550",

    "https://picsum.photos/id/232/1000/550",

    "https://picsum.photos/id/233/1000/550",

    "https://picsum.photos/id/234/1000/550",

    "https://picsum.photos/id/235/1000/550"

  ];

  slideshow.images = images;

```