Comment arrêter de glisser après la dernière image dans FilmRoll jQuery carrousel

Question

Je veux arrêter FilmRoll jQuery carousel après la première boucle puis désactiver le bouton suivant. Mais l'utilisateur peut toujours voir le bouton précédent qui est ensuite désactivé sur la première diapositive.

Une suggestion?

$(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

Peut-être juste de retirer le suivant/précédent flèches seraient une solution pour vous ...

// 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

Si vous voulez faire juste première boucle puis changer scroll à true.

Code Mise à jour:

$(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.