슬라이드를 만들고 싶어요

우선 홈페이지 인덱스에 이렇게 떠있는 부분이 있습니다.

좌우로 돌릴수 있고 자동으로 슬라이드 되는 부분인데요.

이 아래쪽 사진들을 회전하게 위 슬라이드처럼 회전하게 만들고 싶어요.

그래서 인덱스 파일에서 일단 위쪽 코드 그대로 가져왔어요.

        <div class="article article2">
            <div class="article-tit">
                <h3>활동 갤러리</h3>
                <p>한복모델협회에서 알려드리는 소식을 가장 빠르게 만나보세요.</p>
            </div>
            <div class="container">
                <div class="article-slide">
                    
                    <?php
                        // 이 함수가 바로 최신글을 추출하는 역할을 합니다.
                        // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
                        // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
                        echo latest('theme/pic_basic2', 'history', 8, 15);
                    ?> 
                    <div class="article-slide-btn">
                        <a href="#!" class="slide-prev">
                            <img src="/img/slide-prev.png" alt="">
                        </a>
                        <a href="#!" class="slide-next">
                            <img src="/img/slide-next.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <script>
                $('.article-slide-wrap').slick({
                    slidesToShow: 4,
                    arrows: true,
                    dots: false,
                    centerMode: false,
                    focusOnSelect: true,
                    fade: false,
                    autoplay: 2000,
                    prevArrow: $('.slide-prev'),
                    nextArrow: $('.slide-next'),
                    responsive: [
                    {
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        dots: true
                    }
                    },
                    {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        dots: true
                    }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                ]
                });
            </script>
        </div>

이걸 아래쪽에 그대로 복사 붙여넣기 했더니

이렇게 세로로 뜨고 화살표도 동작하지 않아요 도와주세요.