CODEWITHSUNDEEP
javascriptjqueryhtmlcssslideshow
Howdy_McGee
Howdy_McGee

Reputation: 10645

Simple Slideshow First Slide Entirely Fades Out

I'm creating a simple slideshow and for some reason the first slide will always fade entirely out before fading in the next list item on the first loop through. Everything after the first transition is perfectly fine it's just the first loaded index.

I've tried playing with the opacity, how it's being displayed ( block, list-item, etc. ), tried fading in the next slide first before attempting to fade out the current list item, different jquery loads ( document ready, window load ).

Why is it only happening on the first iteration and how can I fix it?

function fadeBanners() {
    var totalPanels = $('#bgrs li').length;
    var currIndex = $('#bgrs li.selected').index();
    var nextPanel = ( currIndex + 1 ) % totalPanels;
    setPanel( nextPanel );
}

function setPanel(referencePanel) {
    var currIndex = referencePanel;
    var currPanel = $('#bgrs li.selected').index();

    if (currPanel != referencePanel) {
        /* Start Backgrounds - Fade Out and In */
        $('#bgrs li').eq(referencePanel).fadeIn(1000).addClass('selected');
        $('#bgrs li').eq(currPanel).fadeOut(1000).removeClass('selected');
    }
}

function startShow() {
    var timerId = setInterval(function () {
        fadeBanners()
    }, 2 * 1000);
}
startShow();
#outerWrapper {
    position: relative;
    width: 100%;
    height: 1000px;
}
#bgrs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bgrs li {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover!important;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}
#bgrs li.selected {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerWrapper">
    <ul id="bgrs">
        <li class="selected" style="background: url( 'http://i.imgur.com/EA7pkYA.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/6U8rQOn.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/MyXAIiX.jpg' );"></li>
    </ul>
</div>

For those who like JSFiddle better. The expect output is that the images should fade in and out together so the transition is smooth.

Upvotes: 0

Views: 91

Answers (1)

John Gibbons
John Gibbons

Reputation: 322

The first slide gets its display: block from having the class selected so once it loses that it jumps to the display: none given to #bgrs li, as the fade effect occurs. This quick fix just adds an inline display property to the initial selected slide, so that the first slide remains displayed while it fades. The rest were working properly because fadeIn gives them an inline display property which remains until they are faded out.

function fadeBanners() {
    var totalPanels = $('#bgrs li').length;
    var currIndex = $('#bgrs li.selected').index();
    $('#bgrs li.selected').css("display", "block");
    var nextPanel = currIndex + 1;

    if (nextPanel > totalPanels - 1) {
        nextPanel = 0;
    }

    setPanel(nextPanel);
}

function setPanel(referencePanel) {
    var currIndex = referencePanel;
    var currPanel = $('#bgrs li.selected').index();

    if (currPanel != referencePanel) {
        /* Start Backgrounds - Fade Out and In */
        $('#bgrs li').eq(referencePanel).fadeIn(1000).addClass('selected');
        $('#bgrs li').eq(currPanel).fadeOut(1000).removeClass('selected');
    }
}

function startShow() {
    var timerId = setInterval(function () {
        fadeBanners()
    }, 2 * 1000);
}
startShow();
#outerWrapper {
    position: relative;
    width: 100%;
    height: 1000px;
}
#bgrs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bgrs li {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover!important;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}
#bgrs li.selected {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerWrapper">
    <ul id="bgrs">
        <li class="selected" style="background: url( 'http://i.imgur.com/EA7pkYA.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/6U8rQOn.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/MyXAIiX.jpg' );"></li>
    </ul>
</div>

Upvotes: 1

Related Questions