スライドショーを複数設置

###現在の状態
jqueryを使ってスライドショーを作成しました。
画像を横一列に並べ、進むボタンを押すと一番後ろの要素を前に持ってきて、
スライドできるようにしてあります。戻るボタンは一番最初の要素を後ろに持ってくる感じです。このスライドショーをを一つ設置した場合は大丈夫なのですが、複数設置した場合$('.slide__prev').click(function()と書いてあるため同じクラスを持つ二つのボックスに適用されてしまいます。

###実装したいこと
上のスライドショーの戻るボタン、進むボタンは上のスライドショーのみ適用され、下のスライドショーも同じようにボタンは下のスライドショーのみに適用されたいです。

###試したこと
thisを使ってクリックしたクラスのみに適用しようとしたのですが、
書き方ダメなのかうまくいきません。最悪二つのボックスに別々のクラス名を付けてクリックメソッドを合計４つ作るということも可能ですが、できる限りスマートな方法でやりたいと思っています。

ご回答のほどよろしくお願い致します。

https://jsfiddle.net/ululami/wkddd45h/1/
スライドショー一つ設置です

https://jsfiddle.net/ululami/pmutgpcb/2/
スライドショー二つ設置です

html
1	<div class="wrapper">
2
3		<div class="slideWrapper">
4			<div class="slide">
5				<ul class="slideInner">
6					<li class="slide__item"><img src="./img/dammy_01.jpg"></li>
7					<li class="slide__item"><img src="./img/dammy_02.jpg"></li>
8					<li class="slide__item"><img src="./img/dammy_03.jpg"></li>
9					<li class="slide__item"><img src="./img/dammy_04.jpg"></li>
10				</ul>
11			</div>
12			<p class="slide__prev">
13				戻る
14			</p>
15			<p class="slide__next">
16				進む
17			</p>
18		</div>
19
20		<div class="slideWrapper">
21			<div class="slide">
22				<ul class="slideInner">
23					<li class="slide__item"><img src="./img/dammy_01.jpg"></li>
24					<li class="slide__item"><img src="./img/dammy_02.jpg"></li>
25					<li class="slide__item"><img src="./img/dammy_03.jpg"></li>
26					<li class="slide__item"><img src="./img/dammy_04.jpg"></li>
27				</ul>
28			</div>
29			<p class="slide__prev">
30				戻る
31			</p>
32			<p class="slide__next">
33				進む
34			</p>
35		</div>
36
37	</div>

css
1*{
2	margin: 0;
3	padding: 0;
4}
5
6img{
7	vertical-align: bottom;
8}
9
10ul{
11	list-style: none;
12}
13
14.wrapper{
15	width: 1001px;
16	margin: 0 auto;
17}
18
19.slideWrapper{
20	width: calc(1001px/2);
21}
22
23.slide{
24	width: 100%;
25	height: 100%;
26	overflow: hidden;
27}
28
29.slide__item{
30	width: calc(1001px/2);
31	float: left;
32}
33
34.slide__prev,
35.slide__next{
36	cursor: pointer;
37	margin-top: 20px;
38}
39
40.slide__prev{
41	float: left;
42	margin-left: 40px;
43}
44
45.slide__next{
46	float: right;
47	margin-right: 40px;
48}

javascript
1$(function(){
2
3	$('.slideInner').css('width',(1001/2)*$('.slideInner .slide__item').size()+'px');
4	$('.slideInner .slide__item:last').prependTo('.slideInner');
5	$('.slideInner').css('margin-left',-1001/2+'px');
6
7
8	$('.slide__prev').click(function(){
9		$('.slideInner').animate({
10			marginLeft : parseInt($('.slideInner').css('margin-left'))+1001/2+'px'
11		},500,'swing',
12		function(){
13			$('.slideInner').css('margin-left',-1001/2+'px');
14			$('.slideInner .slide__item:last').prependTo('.slideInner');
15		});
16	});
17
18	$('.slide__next').click(function(){
19		$('.slideInner').animate({
20			marginLeft : parseInt($('.slideInner').css('margin-left'))-1001/2+'px'
21		},500,'swing',
22		function(){
23			$('.slideInner').css('margin-left',-1001/2+'px');
24			$('.slideInner .slide__item:first').appendTo('.slideInner');
25		});
26	});
27
28});