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

如果您只想进行第一次循环，请将scroll更改为true。

更新的代码：

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

如何在FilmRoll jQuery轮播中的最后一张图像后停止滑动

2 个答案: