当我在滑块的末尾时，如何禁用单击按钮

Question

这是我的代码，如果我在滑块的末尾，那么右键应该自动禁用，当初始阶段的im意味着，如果我在“area1”上然后左箭头不工作，同样的事情应该发生如果我在“区域8”，那么右箭头不起作用

$('.rightArrow').click(function(event) {
    $('.box').animate({'left' : "-=200px"});
});
$('.leftArrow').click(function() {
    $('.box').animate({'left' : "+=200px"});
});

.mainRow::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
    width: 0px;
    height: 0px;
}
.wrapper {
    position: relative;
}
.mainRow {

    overflow-x: scroll !important;
    border-collapse:separate;
    border-spacing:5px 0px;
}

.box {
    background: red;
    height: 100px;
    min-width: 200px;
    max-width: 200px;
    display: table-cell;
    animation: slideBox .5s;
    animation-fill-mode: forwards;
    position: relative;
}
.arrows {
    position: absolute;
    width: 100%;
    top: 0;
}
.leftArrow {
    position: absolute;
    left: -50px;
    top: 20px;
    font-size: 40px;
}
.rightArrow {
    position: absolute;
    right: -50px;
    top: 20px;
    font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
  <div class="mainRow">
      <div class="box">area 1</div>
      <div class="box">area 2</div>
      <div class="box">area 3</div>
      <div class="box">area 4</div>
      <div class="box">area 5</div>
      <div class="box">area 6</div>
      <div class="box">area 7</div>
      <div class="box">area 8</div>
  </div>
  <div class="arrows">
      <button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
      <button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
  </div>
</div>

Answer 1

<强>固定

如果您正计划更改您正在使用的幻灯片数量，那么

可能不是最佳解决方案（但在这种情况下，您必须计算可能的最大left来检查是否你想进一步与否。）

在更改位置之前添加position().left的支票：

var truePosition = $('.box').position().left;
$('.rightArrow').click(function(event) {
    if(truePosition > -1415){
        truePosition -= 205;
        $('.box').animate({'left' : "-=205px"});
    }
});
$('.leftArrow').click(function() {
    if(truePosition < 20){
        truePosition += 205;
        $('.box').animate({'left' : "+=205px"});
    }
});

查看jsfiddle

上的工作示例

Answer 2

您可以再使用一个解决方案on this answer

＆＃13;

＆＃13;

while [[  ( ! -f file.csv ) && $(date +'%s') < ${EndTime} ]]
do
  echo "inside loop"    
  sleep 25
...

＆＃13;

var boxWidth = $('.box:first-child').width() + 5;
var cnt = 0;
$('.rightArrow').click(function(event) {
    $('.box').animate({'left' : `-=${boxWidth}px`});
    cnt++;
    if(cnt === $('.mainRow').children().length - 1 ){
    	$(this).hide();
    }else{
    	$(this).show();
    }
    $('.leftArrow').show();
});
$('.leftArrow').click(function() {
    $('.box').animate({'left' : `+=${boxWidth}px`});
    cnt--;
    if(cnt === 0){
    	$(this).hide();
    }else{
    	$(this).show();
    }
    $('.rightArrow').show();
});

＆＃13;

.mainRow::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
    width: 0px;
    height: 0px;
}
.wrapper {
    position: relative;
    width: 200px;
    margin: 0 auto;
}
.mainRow {
    width: 200px;
    overflow-x: scroll !important;
    border-collapse:separate;
    border-spacing:5px 0px;
}

.box {
    background: red;
    height: 100px;
    min-width: 200px;
    max-width: 200px;
    display: table-cell;
    animation: slideBox .5s;
    animation-fill-mode: forwards;
    position: relative;
    text-align:center;
    color: #fff;
    font-weight: 700;
}
.arrows {
    position: absolute;
    width: 100%;
    top: 0;
    z-index:9;
}
.leftArrow {
    position: absolute;
    left: -35px;
    top: 20px;
    font-size: 40px;
    display:none;
}
.rightArrow {
    position: absolute;
    right: -35px;
    top: 20px;
    font-size: 40px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是任何数量的幻灯片的工作小提琴。单击右箭头直到结束，看看会发生什么。

注意：该按钮仅在最后一张幻灯片完全可见时隐藏，因此您可能需要修改滑块才能始终移动整张幻灯片。

编辑：现在应该适用于左键。

$('.rightArrow').click(function(event) {
	$('.box').animate({'left' : "-=200px"});
	if( $('.box').last().isFullyVisible() ){
        $(this).hide();
  	}
    $('.leftArrow').show();
});
$('.leftArrow').click(function() {
  $('.box').animate({'left' : "+=200px"});
  if( $('.box').first().isFullyVisible() ){
    $(this).hide();
  }
        $('.rightArrow').show();
});

$(function(){
  if( $('.box').first().isFullyVisible() ){
    $('.leftArrow').hide();
  }
});



jQuery.fn.isFullyVisible = function(){

	var win = $(window);
	var viewport = {
    	top : win.scrollTop(),
    	left : win.scrollLeft()
	};

	viewport.right = viewport.left + win.width();
	viewport.bottom = viewport.top + win.height();

	var elemtHeight = this.height();
	elemtHeight = Math.round(elemtHeight);

	var bounds = this.offset();
	bounds.top = bounds.top + elemtHeight;
	bounds.right = bounds.left + this.outerWidth();
	bounds.bottom = bounds.top + this.outerHeight();

	return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

}

body{
  margin:0;
  padding:0;
}
.mainRow::-webkit-scrollbar {
        width: 0px;  /* remove scrollbar space */
        height: 0px;
    }
    .mainRow::-webkit-scrollbar-thumb {
        width: 0px;
        height: 0px;
    }
    .wrapper {
        position: relative;
    }
    .mainRow {

        overflow-x: scroll !important;
        border-collapse:separate;
        border-spacing:5px 0px;
    }

    .box {
        background: #ddd;
        height: 100px;
        min-width: 200px;
        max-width: 200px;
        display: table-cell;
        animation: slideBox .5s;
        animation-fill-mode: forwards;
        position: relative;
    }
    .arrows {
        position: absolute;
        width: 100%;
        top: 0;
    }
    .leftArrow {
        position: absolute;
        left: 0px;
        top: 20px;
        font-size: 40px;
    }
    .rightArrow {
        position: absolute;
        right: 0px;
        top: 20px;
        font-size: 40px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
    <div class="mainRow">
        <div class="box">area 1</div>
        <div class="box">area 2</div>
        <div class="box">area 3</div>
        <div class="box">area 4</div>
        <div class="box">area 5</div>
        <div class="box">area 6</div>
        <div class="box">area 7</div>
        <div class="box">area 8</div>
    </div>
    <div class="arrows">
        <button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
        <button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
    </div>
</div>