(8) 화살표 슬라이드

< (8) 화살표 슬라이드 >

           <div class="slider_wrap">
                <div>
                    <img src="/img/gallery/20170911/gallery_07_01.jpg" alt="" />
                    <p class="controls">
                        <a href="#2" class="next">Next</a>
                    </p>
                </div>
                <div>
                    <img src="/img/gallery/20170911/gallery_07_02.jpg" alt="" />
                    <p class="controls">
                        <a href="#2" class="prev">prev</a>
                        <a href="#3" class="next">Next</a>
                    </p>
                </div>
                <div>
                    <img src="/img/gallery/20170911/gallery_07_03.jpg" alt="" />
                    <p class="controls">
                        <a href="#3" class="prev">prev</a>
                        <a href="#4" class="next">Next</a>
                    </p>
                </div>
                <div>
                    <img src="/img/gallery/20170911/gallery_07_04.jpg" alt="" />
                    <p class="controls">
                        <a href="#4" class="prev">prev</a>
                        <a href="#5" class="next">Next</a>
                    </p>
                </div>
                <div>
                    <img src="/img/gallery/20170911/gallery_07_05.jpg" alt="" />
                    <p class="controls">
                        <a href="#4" class="prev">prev</a>
                    </p>
                </div>
            </div>


//추가 화살표 슬라이드

function aroowSlide(){

// 초기 상태 설정 : 첫 번째 슬라이드를 제외하고 모두 숨기기
	$('.slider_wrap').find('> div:eq(0)').nextAll().css({'opacity':'0','display':'none'});

	// 컨트롤러 링크 클릭시
	$('.controls > a').click(function(event) {
		
		event.preventDefault();
		
		var currentslide = $(this).parents('div:first');

		// 클릭 된 링크가 포함 된 div 가져 오기
		var currentposition = $('.slider_wrap div').index(currentslide);

		// 인덱스를 사용하여 페이드 아웃 할 슬라이드 선택
		var nextposition = ($(this).attr('class')=='next') ? currentposition+1 : currentposition-1;

		// 현재 슬라이드를 사라지게 하기
		$('.slider_wrap div:eq('+currentposition+')').animate({opacity: 0}, 250, function() {

			// 숨기기
			$('.slider_wrap div:eq('+currentposition+')').css('display','none').removeClass('on');

			// 보이기
			$('.slider_wrap div:eq('+nextposition+')').css('display','block').addClass('on');

			// 
			$('.slider_wrap div:eq('+nextposition+')').animate({opacity: 100}, 100);
		  }
		);
	});

}