[Support request] Responsive fullscreen background slideshow

[Tim]

Found a way to use HTML / CSS to create a responsive background slideshow using CSS transition effects. This works with Google AMP and need some assistance so it can be used with generatepress.

When I embed it in element I have little to no control of image size which I set at 100vh. Any assistance would be great. Might be able to add it as a feature in future releases. 🙂

<strong>1) Create a list of slides for the slideshow.</strong>

<ul class="slideshow">
  <li> <span>Slide One</span> </li>
  <li> <span>Slide Two</span> </li>
  <li> <span>Slide Three</span> </li>
  <li> <span>Slide Four</span> </li>
</ul>

<strong>2) Style the slideshow.</strong>

html { min-height: 100%; }

body { height: 100%; }

.slideshow {
  list-style: none;
  z-index: 1;
}

.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s;
}

.no-cssanimations .slideshow li span { opacity: 1; }

<strong>3) Create the crossfade animations by changing the opacity level using @keyframes.</strong>

@-webkit-keyframes 
imageAnimation { 0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-moz-keyframes 
imageAnimation { 0% {
 opacity: 0;
 -moz-animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -moz-animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@keyframes 
imageAnimation { 0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-webkit-keyframes 
titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-moz-keyframes 
titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@keyframes 
titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

<strong>4) .slideshow li:nth-child(1) span { background-image: url(1.jpg); }</strong>

.slideshow li:nth-child(2) span {
  background-image: url(2.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
  background-image: url(3.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}

.slideshow li:nth-child(4) span {
  background-image: url(4.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

[David]

Hi there,

if you have it setup on a site, please share a link and we maybe able to point you in the right direction.

[Tim]

David,
Thanks for your help.Per your request here is the link to the site, Midcitiesdentist.com. I got the banner to work after stepping away on the desktop. Now need assistance with the mobile device sizing.

It does not appear that Element controls any of the padding or dynamic sizing for either desktop or mobile when using the code. Padding is adjusted in CSS for big-hero-text1, small-hero-text1, and xsmall-hero-text1.

Verified code works with AMP but had some less than desired results if the plugin is enabled. The full image extends into the rows below on some browsers and not fill the screen on others. Appears to work well without AMP other than vertical text alignment for various screen sizes.

Using AMP it got a 97 desktop and 95 mobile for google pagespeed (Using WP Fastest Cache).
Without AMP and Using WP Fastest Cache 88 desktop and 83 mobile.

Without AMP 97 desktop and 78 mobile (Using WP Fastest Cache).
Without AMP and Using WP Fastest Cache 79 desktop and 70 mobile

If you would like access let me know. This site will be taken down this week.

[Tom]

Hi there,

You’ll need to use your own media query CSS to change things on mobile, as you’re using your own HTML/CSS on desktop.

For example:

@media (max-width: 768px) {
    /* Your mobile CSS in here */
}

CSS-only sliders are hard (which is why people use javascript).

I’m not sure this will fix all of the issues, but it may help:

.page-hero {
    position: relative;
    overflow: hidden;
}

[Author]

Posts