スライドの切り替えボタンの表示・非表示

Question

お世話になります。jQueryでスライドを自作してみたのですが、
スライドの初めと終わりの処理部分で手が止まってしまっています。
是非皆様の知識をお借りしたいと存じます。
宜しくお願い致します。

###前提
画像ではなく、<div class="grid"></div>を横並びにしたスライドを作成しております。
画面上には最高3つの<div class="grid"></div>が表示され、4番目からはスライド切り替えで表示されます。
スライドは1要素ずつ左右にズレるイメージです。
また、<div class="grid"></div>の数は決まっておりません。
スライドは「次へ」「戻る」のような切り替えボタンのみでのスライド切り替えとなります。
###実現したいこと
上記要素が3つですとスライドは行いませんので、スライド切り替えボタンは非表示となり、4つ以上からスライド切り替えボタンを表示させます。
また、始めの要素が表示されている時は「戻る」ボタン非表示、最後の要素が表示されましたら「次へ」のボタン非表示としたいです。
始めの要素と最後の要素が表示されていない時は「次へ」「戻る」ボタンは表示されます。
###出来ていない処理
要素3つまでの時の非スライドと4つ以上のスライド表示はなんとか実現する事が出来ました。
ただ、【始めの要素が表示されている時は「戻る」ボタン非表示、最後の要素が表示されましたら「次へ」のボタン非表示】
この部分がどうしてもわかりません。
ご存じの方いらしゃいましたら、宜しくお願い致します。

<div class="mod-3-grid" id="slide-wrape">
<p class="slide-next"><span><b></b><b></b></span></p>
<p class="slide-back"><span><b></b><b></b></span></p>

<div class="slide-inner">
<!-- slide-inner -->
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<!-- /slide-inner -->
</div>
</div>

#slide-wrape {
    position: relative;
    width: 980px;
    box-sizing: border-box;
    padding: 0 40px;
    min-height: 382px;
}

.hidden-wrape {
    overflow: hidden;
    width: 900px;
    min-height: 382px;
    position: relative;
}

.slide-inner {
    position: absolute;
}

.grid {
    float: left;
    width: 260px;
    margin: 0 0 30px 60px;
    text-align: left;
}

.grid:first-child {
    margin: 0 0 30px;
}

.slide-next {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 30px;
    height: 30px;
    background: #333;
    z-index: 10;
    display: none;
}

.slide-back {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 30px;
    height: 30px;
    background: #333;
    z-index: 10;
    display: none;
}

(function() {
	
	var slideWidth = $('#slide-wrape .grid').outerWidth() + 60; 
	var slideNum = $('#slide-wrape .grid').length;
	
		$(function(){
			
			if(slideNum > 3){
				
					$('.slide-next, .slide-back').show();
					$('#slide-wrape .slide-inner').wrap('<div class="hidden-wrape">');
	
					var slideSetWidth = slideWidth * slideNum - 60;
						$('#slide-wrape .slide-inner').css('width', slideSetWidth); 
						
					var slideCurrent = 0;
					var Nslide = function(){
					if( slideCurrent < 0 ){
						slideCurrent = slideNum - 1;
					}else if( slideCurrent > slideNum - 1){
						slideCurrent = 0;
					}
		
					$('#slide-wrape .slide-inner').stop().animate({
					  left: slideCurrent * -slideWidth
						});
					}
			
					$('.slide-next').on("click", function(){
						slideCurrent++;
						Nslide();
					});
					
					$('.slide-back').on("click", function(){
						slideCurrent--;
						Nslide();
					});
					
						
			
				}else {
					$('.slide-next, .slide-back').hide();
			}
		
		});
}());

Answer 1

関数Nslide で slideCurrent が 0 なら $('.slide-back').hide();、slideNum - 1 なら $('.slide-next').hide(); すればよいのでは？

Comments

[sakio6]

ご回答有難うございます。
ご回答頂きました部分を下記のように修正したのですが、
「次へ」「戻る」どちらをクリックしても一気に最後までスライドされてしまいそれから何をしても動かなくなってしまいました。
そもそも、おっしゃている内容を私が勘違いしているのでしょうか？
`if( slideCurrent = 0 ){

$('.slide-back').hide();
}else if( slideCurrent = slideNum - 1){

$('.slide-next').hide();
}`

[kei344]

コメント欄はマークダウンが使えないんですよね･･･。

とりあえず if の式が間違っています。
× ( slideCurrent = 0 )
○ ( slideCurrent === 0 )

【比較演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity_strict_equality_()

[sakio6]

マークダウン使えないんですね。失礼致しました。

if文の間違い指摘と、比較演算子のURL有難うございます。
一歩前進出来ましたので、他の方法も色々試してみたいと思います。
遅い時間にも関わらず素早いお返事有難うございました。

[kei344]

追記部分についてはコメント欄に書かれた if に else を足して、
$('.slide-next, .slide-back').show();
を入れれば良いですよ。

[sakio6]

昨日に引き続きご回答有難うございます。

昨日から頂いています回答を見ますと、少しの変更で理想の動きに近づけるような気がしました。
自分が勉強不足の為難しく考えていましたが、少し考え方を変えるだけで大丈夫そうなので、勉強も兼ねてソースを見直してみたいと思います。

何度もご回答頂いたにも関わらず解決出来た旨のご連絡が出来ず申し訳ないのですが、まだ解決ではないですが一度質問を閉めさせて頂き修正してみたいと思います。

また、初歩的な質問をする機会があるかと思いますが、
もし質問を見かけましたら宜しくお願い致します。

有難うございました。