[jQuery] 플러그인 없이 slide만들기

html 

 <div class="portBG">
    <div class="port">
        <div class="slides">
            <ul class="slides-container">

                <li class="coldaewon">
                    <div class="view_img"><img src="이미지 URL" alt="이미지1"></div>
                    <h3>제목<a href="url" target="_blank">View</a></h3>
                    <ul>
                        <li>
                            내용
                        <li>내용 </li>
                        <li>사용 색상 :
                            <span></span>
                            <span></span>
                            <span></span>
                        </li>
                    </ul>
                </li>

                <li class="jm">
                    <div class="view_img"><img src="이미지 URL" alt="이미지2"></div>
                    <h3>제목 <a href="url" target="_blank">View</a></h3>
                    <ul>
                        <li>
                            내용
                            <li>내용</li>
                            <li>사용 색상 :
                                <span></span>
                                <span></span>
                                <span></span>
                            </li>
                        </ul>
                    </li>

                    <li class="fixfree">
                        <div class="view_img"><img src="이미지 URL" alt="이미지3"></div>
                        <h3>제목<a href="url" target="_blank">View</a></h3>
                        <ul>
                            <li>내용</li>
                            <li>내용</li>
                            <li>사용 색상 :
                                <span></span>
                                <span></span>
                                <span></span>
                            </li>
                        </ul>
                    </li>    
                </ul>

                <div class="prevnext">
                    <a href="#" class="prev">이전</a>
                    <a href="#" class="next">다음</a>
                </div>

            </div>
        </div>
    </div>
</div>

 

css

.port{max-width: 1200px; margin: 0 auto; margin-top: 8%; padding: 0 50px;}
.port .slides{position: relative; width:100%; height: 100vh; margin:0 auto; margin-top:40px; opacity: 0; transform: translateY(60px);}
.port .slides.on{transform: translateY(0); opacity:1; transition:all .7s .2s}
.port .slides>.slides-container{width:auto;}
.port .slides>.slides-container>li{display: none; width: calc(100% / 12 * 10); height: auto; text-align: center; position: absolute; top: 0; left: 10%;}
.port .slides>.slides-container>li .view_img{width: 100%;}
.port .slides>.slides-container>li .view_img img{width: 80%;}
.port .slides>.slides-container>li.hospital>ul>li:last-child{text-align: center; padding-left: 20px;} 
.port .slides>.slides-container>li>h3{padding-top: 30px;}
.port .slides>.slides-container>li>h3>a{display: inline-block; margin-left:10px; padding:4px 10px; color:#fff; background-color:rgb(252, 97, 255);; font-size: 16px; border-radius: 4px; transition: all 0.3s;}
.port .slides>.slides-container>li>h3>a:hover{transition: all 0.3s; transform: translateY(-6px);}
.port .slides>.slides-container>li>ul{padding-top: 30px; padding-bottom: 30px;}
.port .slides>.slides-container>li>ul>li{margin-bottom:5px; padding-top: 20px;}
.port .slides>.slides-container>li>ul>li>span{display: inline-block; width:10px; height: 10px; margin-left: 5px; border-radius: 50%;}
.view_img img{width: 100%; max-width: 700px;}
.port .slides>.slides-container>li:nth-child(1){display: block;}
.port .slides>.slides-container>li.coldaewon>ul>li>span:nth-child(1){background-color: #c90101;}
.port .slides>.slides-container>li.coldaewon>ul>li>span:nth-child(2){background-color: #013ca2;}
.port .slides>.slides-container>li.coldaewon>ul>li>span:nth-child(3){background-color: #019601;}
.port .slides>.slides-container>li.jm>ul>li>span:nth-child(1){background-color: #ccc;}
.port .slides>.slides-container>li.jm>ul>li>span:nth-child(2){background-color: #fff;}
.port .slides>.slides-container>li.jm>ul>li>span:nth-child(3){background-color: #000;}
.port .slides>.slides-container>li.fixfree>ul>li>span:nth-child(1){background-color: #ddd;}
.port .slides>.slides-container>li.fixfree>ul>li>span:nth-child(2){background-color: #fff;}
.port .slides>.slides-container>li.fixfree>ul>li>span:nth-child(3){background-color: pink;}
.prevnext{position: absolute; top:28%; width:100%}
.prev, .next{position: absolute; display: block; width:30px; height: 30px; text-indent: -9999px; background-size: cover; opacity: 0.7;transition: all 0.3s;}
.prev{left:0%; background-image: url(../img/left-arrow.png);}
.next{right:0%; background-image: url(../img/right-arrow.png);}

 

jQuery

var $paging = $(".slides_container>li>a");
    var pagingIdx = 0;

    $(".prev").click(function (evt) {
        evt.preventDefault();
        if (pagingIdx >= 0) {
            pagingIdx--;
            $(".slides-container>li").eq(pagingIdx).fadeIn().siblings().fadeOut();

        }else{
            pagingIdx = 1;
            $(".slides-container>li").eq(pagingIdx).fadeIn().siblings().fadeOut();
        }
        $paging.eq(pagingIdx).parent().addClass("on").siblings().removeClass("on");
    });

    $(".next").click(function (evt) {
        evt.preventDefault();
        if (pagingIdx <= 1) {
            pagingIdx++;
            $(".slides-container>li").eq(pagingIdx).fadeIn().siblings().fadeOut();
        } else {
            pagingIdx = 0;
            $(".slides-container>li").eq(pagingIdx).fadeIn().siblings().fadeOut();
        }
        $paging.eq(pagingIdx).parent().addClass("on").siblings().removeClass("on");
    });

* 만들려고 하는 슬라이드의 갯수만큼 pagingIdx 를 수정해 주어야함