JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="slideWrap">
					<div class="slideArea">
						<ul>
							<li class="item"><a href="#">
								<img src="http://shop2d.olleh.com/pordImg/upload/1210/bigFrontImg049.jpg" alt="" class="imgItem" />
								<p class="itemName">갤럭시 센스(갤럭시J5)</p>
								<p class="itemPrice">(월) <span class="redb">2,510</span> 원~</p>
							</a></li>
							<li class="item"><a href="#">
								<img src="http://shop2d.olleh.com/pordImg/upload/1210/bigFrontImg049.jpg" alt="" class="imgItem" />
								<p class="itemName">갤럭시 센스(갤럭시J5)</p>
								<p class="itemPrice">(월) <span class="redb">2,510</span> 원~</p>
							</a></li>
							<li class="item"><a href="#">
								<img src="../images/pc/person/my/img_homephone.jpg" alt="집전화" class="imgItem" />
								<p class="itemName">집전화</p>
							</a></li>
							<li class="item"><a href="#">
								<img src="../images/pc/person/my/img_gigaint.jpg" alt="기가인터넷" class="imgItem" />
								<p class="itemName">기가인터넷</p>
							</a></li>
							<li class="item"><a href="#">
								<img src="http://shop2d.olleh.com/pordImg/upload/1210/bigFrontImg049.jpg" alt="" class="imgItem" />
								<p class="itemName">갤럭시 센스(갤럭시J5)</p>
								<p class="itemPrice">(월) <span class="redb">2,510</span> 원~</p>
							</a></li>
							<li class="item"><a href="#">
								<img src="http://shop2d.olleh.com/pordImg/upload/1210/bigFrontImg049.jpg" alt="" class="imgItem" />
								<p class="itemName">갤럭시 센스(갤럭시J5)</p>
								<p class="itemPrice">(월) <span class="redb">2,510</span> 원~</p>
							</a></li>
							<li class="item"><a href="#">
								<img src="../images/pc/person/my/img_homephone.jpg" alt="집전화" class="imgItem" />
								<p class="itemName">집전화</p>
							</a></li>
							<li class="item"><a href="#">
								<img src="../images/pc/person/my/img_gigaint.jpg" alt="기가인터넷" class="imgItem" />
								<p class="itemName">기가인터넷</p>
							</a></li>
						</ul>
						<a href="javascript:void(0);" class="btnPrev"><img...

CSS

.slideWrap{border:1px solid #d9d9d9;border-width:1px 0;margin-bottom:30px;}
.slideWrap .slideArea{position:relative;overflow:hidden;width:767px;height:261px;}
.slideWrap .slideArea ul{position:absolute;top:0px;left:0px;*zoom:1;}
.slideWrap .slideArea ul:after{content:'';display:block;clear:both;}
.slideWrap .slideArea ul li{position:relative;float:left;width:191px;height:256px;padding:5px 1px 0 0;background:url(../../../images/pc/person/my/bg_slide_line.gif) no-repeat right 0}
.slideWrap .slideArea ul li a{display:block;}
.slideWrap .slideArea ul li a:hover{text-decoration:none;}
.slideWrap .slideArea ul li img.imgItem{width:191px;}
.slideWrap .slideArea ul li span.imgRating{position:absolute;top:0px;left:10px;}
.slideWrap .slideArea ul li .itemName{text-align:center;font-size:16px;font-weight:bold;letter-spacing:-1px;color:#000;line-height:30px;}
.slideWrap .slideArea ul li .itemPrice{text-align:center;font-size:13px;color:#474747;}
.slideWrap .slideArea ul li .itemPrice span.redb{font-weight:bold;color:#e0200c;font-family:tahoma;font-size:16px;letter-spacing:-1px;}
.slideWrap .btnPrev{position:absolute;top:113px;left:0px;display:none;}
.slideWrap .btnNext{position:absolute;top:113px;right:0px;}

JavaScript

$(".slideArea").each(function(){
    var $obj = $(this).find("ul");
    var nCurrentIndex = 0;
    var animateChk = true;
    var cnt = 0;
    var bannerWidth = 192;
    var $objLength = $obj.children("li.item").length;
    init();
    function init(){
        $obj.css({width:bannerWidth*$objLength});
        $objNext = $obj.parent().find("a.btnNext");
        $objPrev = $obj.parent().find("a.btnPrev");
        $objNext.on("click",function(){
            var animateChk = 0;
            nextMove(animateChk)
        });
        $objPrev.on("click",prevMove);
        if($objLength < 5){
            $objNext.hide();
            $objPrev.hide();
        }
    } 
    function nextMove(){
        if (animateChk) {
            animateChk = false;
            var nIndex = nCurrentIndex + 1;
            if(nIndex < $objLength-3){
                showBannerAt(nIndex);
            }
        };
    }
    function prevMove(){
        if (animateChk) {
            animateChk = false;
            var nIndex = nCurrentIndex - 1;
            if(nIndex < 0){
                nIndex = 0;
            }
            showBannerAt(nIndex);
        }
    }
    function showBannerAt(nIndex){	
        $objNext = $obj.parent().find("a.btnNext");
        $objPrev = $obj.parent().find("a.btnPrev");
        $obj.stop().animate({left:-(bannerWidth*nIndex)},500, function(){
            animateChk = true;
        });

        nCurrentIndex = nIndex;
        if(nIndex == $objLength-4){
            $objNext.hide();
        } else if(nIndex == 0){
            $objPrev.hide();
        } else{
            $objNext.show();
            $objPrev.show();
        }
    }
});