FilmRoll jQueryカルーセルの最後の画像の後にスライドを止める方法

Question

最初のループの後にFilmRoll jQuery carouselを停止してから、次のボタンを無効にします。しかし、ユーザは前のボタンを見ることができ、最初のスライドでは無効になります。

提案がありますか？

$(document).ready(function() { 
    /*var film_roll = new FilmRoll({ 
    container: '#portfolioSlider', 
    vertical_center: true, 
    hover: false, 
    scroll: false 
    });*/ 


    var film_roll = new FilmRoll({ 
    container: '#portfolioSlider2', 
    vertical_center: true, 
    hover: false, 
    scroll: false, 
    move_on_start: false, 
    offset: -111 
    }); 
}); 

$('#portfolioSlider2').on('film_roll:moved', function(event) { 
    alert(film_roll.index); 
    if (film_roll.index == film_roll.children.length - 1) { 
    alert("hello"); 
    film_roll.clearScroll(); 
    } 
}); 

Answer 1

多分ちょうど前/次の矢印を削除するとあなたのための解決策になる...

// Remove the prev arrow 
setTimeout(function(){ 
    $(document).find('.film_roll_prev').hide(); 
},600); 

$('#portfolioSlider2').on('film_roll:moved', function(event) { 
    console.log(film_roll.index); 

    if (film_roll.index == film_roll.children.length - 1) { 
    console.log("hello"); 

    // Remove the next arrow 
    $('.film_roll_next').hide(); 
    film_roll.clearScroll(); 
    } 
}); 

CodePen

Answer 2

あなただけの、最初のループを行うtrueにscrollを変更したい場合。

更新コード：

$(function() { 

    var film_roll = new FilmRoll({ 
    container: '#portfolioSlider2', 
    vertical_center: true, 
    hover: false, 
    scroll: true, //to start loop at first 
    move_on_start: false, 
    offset: -111 
    }); 


    $('#portfolioSlider2').on('film_roll:moved', function(event) { 
    if (film_roll.index == film_roll.children.length - 1) { 
     $('.film_roll_next').hide(); 
     $('.film_roll_prev').show(); 
     film_roll.clearScroll(); //stops loop after first round 
    } else if (film_roll.index === 0) { 
     $('.film_roll_prev').hide(); 
     $('.film_roll_next').show(); 
    } else { 
     $('.film_roll_prev').show(); 
     $('.film_roll_next').show(); 
    } 
    }); 
}); 

Demo。