Client logos rotate or fade-in/fade-out [all-in-sets] (non-carousel)

logo-set-rotation.html

<ul class="social-proofs">
    <li class="clientLogo"> <a href="#"><img src="/wp-content/uploads/2015/04/s_zenefits.png" alt=""></a> </li>
    <li class="clientLogo"> <a href="#"><img src="/wp-content/uploads/2016/02/s_pac_12.png" alt=""></a> </li>
    <li class="clientLogo"> <a href="#"><img src="/wp-content/uploads/2015/04/s_turner.png" alt=""></a> </li>
    <li class="clientLogo"> <a href="#"><img src="/wp-content/uploads/2016/02/wholefoods.png" alt=""></a> </li>
    <li class="clientLogo"> <a href="#"><img src="/wp-content/uploads/2015/04/s_edeva.png" alt=""></a> </li>
    <li class="clientLogo" style="display: none;"> <a href="#"><img src="/wp-content/uploads/2015/04/s_google.png" alt=""></a> </li>
    <li class="clientLogo" style="display: none;"> <a href="#"><img src="/wp-content/uploads/2015/04/s_thrillist.png" alt=""></a> </li>
    <li class="clientLogo" style="display: none;"> <a href="#"><img src="/wp-content/uploads/2015/04/s_harrys.png" alt=""></a> </li>
    <li class="clientLogo" style="display: none;"> <a href="#"><img src="/wp-content/uploads/2015/04/s_untapped.png" alt=""></a> </li>
    <li class="clientLogo" style="display: none;"> <a href="#"><img src="/wp-content/uploads/2015/04/s_twitter.png" alt=""></a> </li>
    <li class="clientLogo" style="display: none;"> <a href="#"><img src="/wp-content/uploads/2016/02/s_counsyl.png" alt=""></a> </li>
    <li class="clientLogo" style="display: none;"> <a href="#"><img src="/wp-content/uploads/2016/02/hotel-tonight-logo.png"  alt=""></a> </li>
</ul>

<script>
    // rotate through Client logos on Home

    var logoEls = $('.social-proofs .clientLogo');
    var lastSet, thisSet = 0, nextSet = 1; // nextSet also needs to start at zero otherwise our loop will not play the "first" set first.
    var sets = [];

    ////
    // divide array of logos into sets of 6
    ////
    var setCount = 0; //count number of sets
    var setLimit = 6; //sets of 6 by default
    for (var i = 0; i < logoEls.length; i += setLimit) {
        var tempSet = [];
        tempSet.push(logoEls.slice(i, i + setLimit));
        sets[setCount] = tempSet[0]; // This is where the double nested array was happening**
        console.log(sets);
        console.log(sets.length);
        console.log(sets[setCount]);
        setCount+=1;
    }

    ////
    // fadeOut current set, then fadeIn next set -- repeat through array
    ////
    setInterval(function() {
        if (nextSet > sets.length - 1){ // the length property returns 1s-based contents of an array, but we are looping based on 0s-based array indexes
             lastSet = sets.length - 1;
             thisSet = 0;
             nextSet = 1;
        } else { // just keep going
            lastSet = thisSet;
            thisSet = nextSet;
            nextSet = thisSet + 1;
        }

        // follow the madness
        console.log('lastSet: ' + lastSet + '  thisSet: ' + thisSet + ' nextSet: ' + nextSet);
        console.log('lastSet to fadeOut: ' + sets[lastSet]);
        console.log('thisSet to fadeIn: ' + sets[thisSet]);

        // fadeOut current set, then fadeIn next set
        sets[lastSet].fadeOut(0, function() {
            sets[thisSet].fadeIn();
        });

    }, 3500);
</script>