# Slide Show Stack Fade to White?

**URL:** <https://forums.realmacsoftware.com/t/slide-show-stack-fade-to-white/2456>\
**Category:** RapidWeaver Classic\
**Created:** [September 10, 2015, 8:04pm UTC](https://forums.realmacsoftware.com/t/slide-show-stack-fade-to-white/2456 "2015-09-10T20:04:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Butternut](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/butternut/32/3946_2.png) [@Butternut](https://forums.realmacsoftware.com/u/Butternut)\
**Post date:** [September 10, 2015, 8:04pm UTC](https://forums.realmacsoftware.com/t/slide-show-stack-fade-to-white/2456/1 "2015-09-10T20:04:09Z")

</div>

Although the owner of various and sundry slide show stacks, I am looking for a capability that I am not sure exists.

I would like the slide show images to dissolve to white, before the next image appears, rather than fading one image into another. The latter technique works fine when the images are all the same size, but the images tend to get distorted, to a greater or lesser degree, if they are not the same size. The worst culprit is unfortunately my latest acquisition, the RefinedSlider from the usually impeccable Stacks4stacks.

I thought that it might be possible to insert a white frame in between all the images, but of course that doesn’t work, because it gives equal weight to the white. It is a solution that would necessitate individual control of slides.

Wondering if anyone has any suggestions?

Thanks.

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [September 10, 2015, 9:58pm UTC](https://forums.realmacsoftware.com/t/slide-show-stack-fade-to-white/2456/2 "2015-09-10T21:58:06Z")

</div>

> [@Butternut](#):
>
> The worst culprit is unfortunately my latest acquisition, the RefinedSlider from the usually impeccable Stacks4stacks.

Unfortunately you’re too late to submit feature requests. That deadline has passed and RefinedSlider 2 has already been released. Other users appear to generally be pleased with the update. The free demo version provided has promoted lots of interest. The announcement can be found here:

> [@RefinedSlider 2 released for Stacks 3](http://forums.realmacsoftware.com/t/refinedslider-2-released-for-stacks-3/2185):
>
> [RefinedSlider](https://stacks4stacks.com/refinedslider/) is the stack made for image slideshows. One of the best in its category, the RefinedSlider stack gives you the power to create richly-engaging slideshows; with huge scope to customise both the style and behaviour of completed image sliders. Few other slideshow stacks come close to what RefinedSlider can offer or achieve. Within a few clicks, you’ll have beautiful, responsive image slideshows to grace your webpages and wow your site visitors with. RefinedSlider is compatible with a…

You’ll come to find that just about every slideshow plugin available uses cross-fade transitions. Why? Because most sliders work on the basis of changing the opacity or z-index of slides as they transition. It’s very rare there is ever any ‘white’ behind the current slide to display; as one image fades out and another fades into view. Also I regret to inform you that you’re in the minority of users wanting slides fading to white - a majority of people want attractive slideshow effects and don’t want solid blocks of colour between slides. In other words there’s no money to be made in slideshows that fade to white between images!

It would not be difficult to set the transition speed in RefinedSlider to 0ms and use CSS code to apply animations on the images, in this instance fading the RefinedSlider images to white every 4.5 seconds, .5 seconds before the image changes:

```
.nivoSlider img {
animation-duration: 500ms;
animation-delay: 4500ms;
animation-iteration-count: infinite;
animation-name: fadetowhite;	

-moz-animation-duration: 500ms;
-webkit-animation-delay: 4500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-name: fadetowhite;

-webkit-animation-duration: 500ms;
-webkit-animation-delay: 4500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: fadetowhite;
}

@-keyframes fadetowhite {
from {
opacity: 1.00;
}    
to {
opacity: 0;
}
}
    
@-moz-keyframes fadetowhite {
from {
opacity: 1.00;
}    
to {
opacity: 0;
}
}
    
@-webkit-keyframes fadetowhite {
from {
opacity: 1.00;
}
to {
opacity: 0;
}
}

```

If you fiddle with the CSS animation timings, you should be able to get these to sync-up to the Javascript animations used in the slider. I was able to without much difficulty. But this does not take into account of someone hovering their mouse cursor over the slider to pause it or captions. And the fact the CSS and Javascript are running separately, eventually you’ll find one starts to outrun the other and they become out-of-sync. So I would not rate this solution highly, unless you’re building really simple sliders.

Really you need to start from scratch. Find a simple jQuery slideshow plugin that is not doing opacity or z-indexing on images. Something [like this one](https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/). Paste it into my Builder stack and if you tweak the Javascript settings you can get the images to fade to white between each other. Example attached.

[https://dl.dropboxusercontent.com/u/422052/FadeToWhiteSlider.rw6.zip](https://dl.dropboxusercontent.com/u/422052/FadeToWhiteSlider.rw6.zip)

---

<div class="post-metadata">

**Author:** ![Butternut](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/butternut/32/3946_2.png) [@Butternut](https://forums.realmacsoftware.com/u/Butternut)\
**Post date:** [September 10, 2015, 10:42pm UTC](https://forums.realmacsoftware.com/t/slide-show-stack-fade-to-white/2456/3 "2015-09-10T22:42:45Z")

</div>

As politicians are inclined to say, I misspoke. I meant RefinedSlider 2. I did in fact test it out before purchasing, but unfortunately only with images that were the same size. It looked great.

Thank you, Will, for your very detailed response to my post. Unfortunately, your advice is completely above my pay grade.

For the record, this is a link to what I perceive the problem to be. The theme is Foundation. The slider stack on the page is RefinedSlider 2.

[https://app.box.com/s/qzf3ixgb3o0y9f49mhua0ge07irqxws1](https://app.box.com/s/qzf3ixgb3o0y9f49mhua0ge07irqxws1)

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [September 11, 2015, 8:22am UTC](https://forums.realmacsoftware.com/t/slide-show-stack-fade-to-white/2456/5 "2015-09-11T08:22:15Z")

</div>

> [@Butternut](#):
>
> PS: The dropbox example you offered, Will, did not create a slider page, but merely the following static page.

Did you install the free [Builder stack](http://stacks4stacks.com/builder/) first which I stated was used in the test project, in my previous post? That is required to create drop-zones for your HTML, CSS and Javascript markup to go into and to call jQuery that is needed for the script to function.

---

<div class="post-metadata">

**Author:** ![Butternut](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/butternut/32/3946_2.png) [@Butternut](https://forums.realmacsoftware.com/u/Butternut)\
**Post date:** [September 11, 2015, 9:13am UTC](https://forums.realmacsoftware.com/t/slide-show-stack-fade-to-white/2456/6 "2015-09-11T09:13:55Z")

</div>

Thank you again for your response.

Realizing my mistake, I posted the following about a half hour after I posted that picture. I attempted to delete the picture, but Realmac was not cooperating.

“OK, I blew it again. It works after downloading the Builder stack. But it is still pretty inscrutable, at least for me.”

In any case, bottom line: I am a 68 year old artist, not a 25 year old geek. I neither have the time, or quite frankly the inclination, to engage in the level of programming necessitated by your suggestions.

I appreciate your support, as always. You are the best. But I would dearly love a solution to my quandary that does not require that I completely fry what is left of my rapidly diminishing sanity.