當幻燈片可見時觸發一個函數，然後在完成後摧毀它，然後重複

Question

這可能是上面最糟糕的標題，但我會嘗試在這裏更好地解釋我的自我。

目前我有一個簡單的衰落旋轉木馬，它是由光滑的動力，這工作正常。它顯示一張幻燈片，然後淡入下一張幻燈片。

除此之外，我還有一個簡單的作家plugin，它可以輸出幻燈片中的內容。

我面臨的問題是，當我觸發打字機功能時，它會觸發所有其他輪播幻燈片上的所有內容，以便一次開始打字，當我真的希望它打印出可見的幻燈片然後觸發再次看到下一張幻燈片時。

我已經嘗試了很多東西，但沒有多少運氣。打印完成後是否必須銷燬打印機功能，然後再次在幻燈片上加載它？如果有人能夠闡明它，我會非常感激。

Fiddle

$(function() { 
    $('#dashboard').slick({ 
    fade : true, 
    autoplay: true, 
    autoplaySpeed: 3000, 
    arrows: false, 
    pauseOnHover: false 
    }); 
    $('.panel').typeIt({}); 
}); 

Answer 1

如果您需要使用typeit efffect在slick carousel每個可見幻燈片可以使用beforeChange事件。

使用華而不實的最後一個版本，這個例子：

$('#dashboard').slick({ 
 
    fade : true, 
 
    autoplay: true, 
 
    autoplaySpeed: 3000, 
 
    arrows: false, 
 
    pauseOnHover: false 
 
}); 
 

 
$('.panel').eq(0).typeIt({loop: true}); // typeit on the first ele 
 
$('#dashboard').on('beforeChange', function(event, slick, currentSlide, nextSlide) { 
 
    // 
 
    // typeit the current slide if not yet initialized 
 
    // 
 
    // if ($('.panel').eq(nextSlide).find('.ti-placeholder').length == 0) 
 
    // 
 
    // or, you may test: 
 
    // 
 
    if ($('.panel').eq(nextSlide).tiSettings().is('.panel') == false) { 
 
    $('.panel').eq(nextSlide).typeIt({loop: true}); 
 
    } 
 
});

#nav { 
 
    margin-bottom: 10px; 
 
} 
 
.panel { 
 
    border: 10px solid #333; 
 
    background: #ccc; 
 
    height:200px; 
 
    margin: 10px; 
 
    font-size: 72px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.3.0/typeit.min.js"></script> 
 

 
<div id="dashboard"> 
 
    <div class="panel">This is a test 1</div> 
 
    <div class="panel">This is a test 2</div> 
 
    <div class="panel">This is a test 3</div> 
 
    <div class="panel">This is a test 4</div> 
 
    <div class="panel">This is a test 5</div> 
 
    <div class="panel">This is a test 6</div> 
 
    <div class="panel">This is a test 7</div> 
 
</div>