slick slide 사용법 개빡친다

응애·2022년 11월 29일
0

에휴... 일단 옵션은 찾아보면 정리해두신 거 많으니 스킵하고.
우선 사용하려면 css랑 js 연결해줘야됨.

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>        

이거 두 개부터 연결해줘요
css 수정법이 AG-Grid 랑 비슷함;; 자기가 원하는 css 부분이 어디인지 개발자도구 (F12) 로 포인트 찍어서 읽어오고, css 파일 하나 만들어서 수정해줘야 됨

이런식임
개골치아파 아앙아으ㅏ으아으ㅏ으ㅏㅇ으 ㅂㄷㅂㄷㅂㄷㅂㄷㅂㄷㅂㄷㅂㄷ

참아 메가응애...!
난 못참아!!!!!!!

아무튼. 그다음엔 js 파일 하나 만들어서 원하는 옵션 정의해주면 됨.

     $('#subMenu2').slick({
        slide: 'li',                    // 슬라이드할 태그
        infinite: true,                 // 무한 슬라이드 여부
        slidesToShow: 5,                // 한 화면에 보여줄 갯수
        slidesToScroll: 5,              // 한 번 클릭할 때 돌아갈 갯수
        prevArrow : $(".left"),
        nextArrow : $(".right"),
        variableWidth : true,           // 요소 넓이 자동 조정 여부 (true : 조정 안 함 / false : 자동 조정)
        draggable: false,               // 드래그 가능 여부
    });

난 이렇게 했는데
혹시 slick 고수님 계시면 알려줘요
slick 두 번 못 써요?
그럼 여러 곳에 쓰려면 어떻게 해야 되나요

                <ul class="topMenu">
                    <li>요일별</li>
                </ul>
                    <ul id="subMenu1" class="subMenu">
                        <div class="btn left"></div>
                        <li><a href="#" ></a></li>
                        <li><a href="#" ></a></li>
                        <li><a href="#" ></a></li>
                        <li><a href="#" ></a></li>
                        <li><a href="#" ></a></li>
                        <div class="btn right"></div>
                    </ul>

지금 이런식으로 되어 있는데 subMenu 클래스 거니까 안돼 ㅠ
그렇다고 subMenu1 아이디로 여러 개 걸려니까 그것도 안 돼 ㅠ
중복사용 어케하는지 아시는 고수님 알려줘유
젭알제방ㄹ.......!!!!

profile
애응

0개의 댓글