Skip to content

Instantly share code, notes, and snippets.

View sadhvikaaa's full-sized avatar

Sadhvika K sadhvikaaa

View GitHub Profile
@sadhvikaaa
sadhvikaaa / fullscreen-css-background-image-slideshow.markdown
Created June 26, 2020 11:49
Fullscreen CSS Background Image Slideshow

Fullscreen CSS Background Image Slideshow

Taking advantage of Sass with Bourbon, I've refactored the original Codrops demo of a Fullscreen Background Image Slideshow to be a little more compact and efficiently managed.

The markup for the slideshow is an unordered list that houses spans which will function as the elements for the background images of the slideshow.

A variable, $animation-delay, is defined as the duration of each slide. This variable will be used to calculate the slideshow's cycle, and makes adding and removing slides a little more manageable.

The first instance of the variable is found tied to the spans that define the background images for each slide. Here, the variable should be multiplied by the total number of slides in the slideshow to set the full length of the cycle.