jquery fade loop with setinterval

Question

Я пытаюсь создать свой собственный простой цикл затухания, основанный на CSS-tricks Auto-Playing Slideshow. Мне нужно разрешить возможность более одного на странице.

По какой-то причине мои слайды не проходят мимо второго. Возможно, из-за того, что он помещается в функцию?

$('.jCaroFade').each(createFader); 
function createFader (i, elem) { 
    var track = $(elem); 
    var firstSlide = track.find('.slide').eq(0); 

    firstSlide.nextAll().hide(); 
    setInterval(function() { 
     firstSlide 
     .fadeOut(500) 
     .next() 
     .fadeIn(500) 
     .end() 
     .appendTo(track); 
    }, 3000); 

} 

Fiddle: https://jsfiddle.net/L66v8oxv/

Спасибо!

Answer 1

Вы не изменяя ссылку firstSlide

$('.jCaroFade').each(createFader); 
 

 
function createFader(i, elem) { 
 
    var track = $(elem); 
 
    var firstSlide = track.find('.slide').eq(0); 
 
    var loop = 0; 
 

 
    firstSlide.nextAll().hide(); 
 
    setInterval(function() { 
 
    loop++; 
 
    firstSlide = firstSlide.fadeOut(500, function() { 
 
     $(this).appendTo(track); 
 
     }) 
 
     .next() 
 
     .fadeIn(500); 
 
    }, 3000); 
 

 
}

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: sans; 
 
} 
 
.track { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 
.slide { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-position: center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.ipsum { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background-color: rgba(255, 255, 255, .75); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="jCaroFade track"> 
 
    <!-- Slides --> 
 
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');"> 
 
    <p class="ipsum">SLIDE ONE</p> 
 
    </div> 
 
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');"> 
 
    <p class="ipsum">SLIDE TWO</p> 
 
    </div> 
 
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');"> 
 
    <p class="ipsum">SLIDE THREE</p> 
 
    </div> 
 
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');"> 
 
    <p class="ipsum">SLIDE FOUR</p> 
 
    </div> 
 
</div>