クロスフェードのスライダーパネルを複数設置

Question

###前提・実現したいこと
進む、戻るボタンで画像がフェードイン、フェードアウトするスライダーを実現したいのですが、このスライダーを一つ設置した場合は上手くいきました。しかし二つ設置した場合、同じクラス名を使っているため連動してしまっています。これを個別で動かしたいです。

###試したこと

前回質問したスライドショーを複数設置を参考にしてthisを使って階層を辿ってslideを取得しようとしてみたのですが、書き方が間違っているためか上手く行きませんでした。
ご回答よろしくお願いします。

###該当のソースコード

https://jsfiddle.net/8z00nysd/2/

$(function(){

	var img = $('.slide').children('img');
	var num = img.length;
	var count = 0;
	img.eq(0).addClass('show');

	$('.slide__next').click(function(){
		img.eq(count).removeClass('show');

		if(count>=num-1) {
			count = 0;
		} else {
			count ++;
		}

		img.eq(count).addClass('show');
	});

	$('.slide__prev').click(function(){
		img.eq(count).removeClass('show');

		if(count<=0) {
			count = num-1;
		} else {
			count --;
		}

		img.eq(count).addClass('show');
	});

});

	<div class="wrapper">

		<div class="slideWrapper">
			<ul class="slide">
				<img src="https://placehold.jp/f44242/f44242/150x150.png">
				<img src="https://placehold.jp/f4d041/f4d041/150x150.png">
				<img src="https://placehold.jp/23e05c/23e05c/150x150.png">
				<img src="https://placehold.jp/2fd2ef/2fd2ef/150x150.png">
			</ul>
			<p class="slide__prev">
				戻る
			</p>
			<p class="slide__next">
				進む
			</p>
		</div>

		<div class="slideWrapper">
			<ul class="slide">
				<img src="https://placehold.jp/f44242/f44242/150x150.png">
				<img src="https://placehold.jp/f4d041/f4d041/150x150.png">
				<img src="https://placehold.jp/23e05c/23e05c/150x150.png">
				<img src="https://placehold.jp/2fd2ef/2fd2ef/150x150.png">
			</ul>
			<p class="slide__prev">
				戻る
			</p>
			<p class="slide__next">
				進む
			</p>
		</div>

	</div>

*{
	margin: 0;
	padding: 0;
}

img{
	vertical-align: bottom;
}

ul{
	list-style: none;
}

.wrapper{
	width: 300px;
}

.slideWrapper{
	width: 150px;
	float: left;
}

.slide{
	min-height: 150px;
	position: relative;
}

.slide img{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 0;
	transition: 0.7s;
}

.slide .show{
	opacity: 1;
	z-index: 1;
}

.slide__prev,
.slide__next{
	cursor: pointer;
	padding: 10px;
	font-size: 12px;
}

.slide__prev{
	float: left;
	margin-left: 5px;
}

.slide__next{
	float: right;
	margin-right: 5px;
}

###補足情報(言語/FW/ツール等のバージョンなど)
jQueryはjquery-2.2.4.minです。

Answer 1

var img = $('.slide').children('img'); を共用しているから当然どちらのボタンを押しても動きます。

$( '.slideWrapper' ).each( function(){
    /* スライドセット毎の処理 */
} );

Comments

[owl]

ご回答ありがとうございます。
この様に記述するということでしょうか。

$( '.slideWrapper' ).each( function(){
var img = $('.slide').children('img');
var num = img.length;
var count = 0;
img.eq(0).addClass('show');
} );

[kei344]

動きましたか？

[owl]

記述しましたが、進む戻るボタンを押しても無反応です。
試しに$('.slide__next').clickと$('.slide__prev').clickをそれぞれeachで囲むようにしても変わらずでした。

お答え頂いたのに申し訳ありません。

[kei344]

「スライドセット毎の処理」にはボタンクリックも含まれるので、それも含めて書くようにしてみては？

> $('.slide__next').clickと$('.slide__prev').clickをそれぞれeachで囲むようにしても
それぞれ囲んでどうなると思ったのでしょうか。 $( '.slideWrapper' ).each(function(){}); はクラスにslideWrapper を持つ要素に順にfunction(){}を実行するものです。

【jQueryのeach()で複数の要素、配列、オブジェクトをループ処理】
http://www.flatflag.nir87.com/each-1325

[owl]

eachで変数のセットからボタンクリックの処理まで囲んでみたのですが、
変化はありませんでした。

下記に記述したコードアップしました。
https://jsfiddle.net/efofz6Ly/1/

[kei344]

https://jsfiddle.net/efofz6Ly/3/
でも
https://jsfiddle.net/efofz6Ly/2/
でも。

[owl]

ご回答ありがとうございます。
まさに自分が実装したいことです。
カンマ区切りでthisを使うか、変数にthisを代入してfindを使えば良いのですね。
勉強になりました。本当にありがとうございます。