I've created a background body slider which will switch through body backgrounds with 'next' and 'back' buttons. Live example here:

<https://ts564737-container.zoeysite.com/lookbook>

This functions perfectly (ignore the large images causing it to load slowly), but I can't seem to add a crossfade effect like on this website:

<http://northamerica.triangl.com/pages/lookbook-swimwear>

I tried this with CSS `transition: all 0.5s ease-out` but the transition is poor and loaded horribly.

Could anybody please advise where I can add a crossfade to this so that it's like the website above? Thank you for your help and time.

**HTML & jQuery etc.**

```
<!-- Remove header from lookbook page only and add background1 -->

<script>
jQuery(document).ready(function() {
    if (top.location.pathname === '/lookbook')
{
    jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
    jQuery("body").addClass("background1");
}
});
</script>

<!-- Change background -->

<script>
jQuery(document).ready(function() {
    var current = 1; // current background index
    var max_backgrounds = 3; // number of backgrounds it will work with any number
    jQuery(".next").click(function() {
        jQuery("body").removeClass("background" + current);
        // next background index or first one if it's the last one
        current++;
        if (current > max_backgrounds) {
            current = 1;
        }
        // change background to background1, background2 ...
        jQuery("body").addClass("background" + current);
    });
    jQuery(".back").click(function() {
        jQuery("body").removeClass("background" + current);
        // previous background index or last one if current is the first one
        current--;
        if (current < 1) {
            current = max_backgrounds
        }
        // change background to background1, background2 ...
        jQuery("body").addClass("background" + current);
    });
});
</script>

<!-- Container plus images -->

<div id="toggle" width="100%">
<img src="/media/import/icons/back.png" class="back">
<img src="/media/import/icons/next.png" class="next">
</div>

```

**CSS**

```
/* Body background options */

.background1 {
    background: url('/media/import/backgrounds/background1.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

.background2 {
    background: url('/media/import/backgrounds/background2.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

.background3 {
    background: url('/media/import/backgrounds/background3.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

/* Toggle Buttons */

#toggle .next {
    float: right;
    margin-right: 20px !important;
}

#toggle .back {
    margin-left: 20px !important;
}

#toggle img {
    margin-top: 400px;
    display: inline;
}

#toggle img:hover {
    cursor: pointer;
    opacity: 0.8;
}

```