Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Slow Down / Cross Dissolve transitions between images in gallery slde show ?


inkhartz

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0
11 minutes ago, tuanphan said:

I solved this for a client. 

Will find the code I have used again.

Please let me know, I really need this !!

Link to post
  • 0

I have a Custom CSS solution using animation. I only used this on version 7.0, so not sure if it works on 7.1. Also, this code is heavily dependent on the number of slides, so you'll have to tweak it for the number of slides you have. If the number of actual slides changes but you don't change the code, your slideshow should revert back to the default, which is better than breaking completely. Disclaimer: this is a css hack, so use at your own risk! 🙂

The sample code below rotates 5 slides every 7 seconds with 2 seconds of crossfade transition:

1. Override the default javascript animation which manipulates opacity, visibility, and z-index. Change "nth-last-child(5)" selectors to the number of slides you have:

.sqs-gallery-design-stacked-slide:first-child:nth-last-child(5),
.sqs-gallery-design-stacked-slide:first-child:nth-last-child(5) ~ .sqs-gallery-design-stacked-slide {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: auto !important;
}

If you're not familiar with the selectors above, read this.

2. Add a looping animation to each slide IMG tag. 35s is the duration it will take to display all the slides (5 slides * 7s) before starting over. 0s, 7s, etc are the delays before each slide begins to fade in. Be sure to change these values for your number of slides and preferred timing.

.sqs-gallery-design-stacked-slide:nth-child(1):nth-last-child(5) img {
  opacity: 1;
  animation: xfade 35s linear infinite forwards 0s;
}

.sqs-gallery-design-stacked-slide:nth-child(2):nth-last-child(4) img {
  opacity: 0;
  animation: xfade 35s linear infinite forwards 7s;
}

.sqs-gallery-design-stacked-slide:nth-child(3):nth-last-child(3) img {
  opacity: 0;
  animation: xfade 35s linear infinite forwards 14s;
}

.sqs-gallery-design-stacked-slide:nth-child(4):nth-last-child(2) img {
  opacity: 0;
  animation: xfade 35s linear infinite forwards 21s;
}

.sqs-gallery-design-stacked-slide:nth-child(5):nth-last-child(1) img {
  opacity: 0;
  animation: xfade 35s linear infinite forwards 28s;
}

3. Add the animation keyframes. 0% is intentionally empty so that the first image appears without fading in. 5.714% is the 2s mark (of 35s) when fade-in is complete. 20% is the 7s mark when the slide should begin fading out. 25.714% is the 9s mark when fade-out is complete.

@keyframes xfade {
  0% {
  }
  5.714% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25.714% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Hope this helps someone. Good luck!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...