slick 그림넣기와 화살표 버튼 docts 수정하기

JQuery

slick 그림넣기와 화살표 버튼 docts 수정하기

낮햇볕 2022. 3. 14. 19:41

slick에 docts를 해주면 저렇게 button 123 들이 나오는데 그것을 변경시켜보겠다

그리고 Previous 랑 Next도 바꿔볼려고한다

또한 안쪽그림도 바꾸려고한다

먼저 그림부터 삽입해보겠다

body태그안에 그림을 넣을수있게 div태그를 넣었다

그다음 각각 classname을 css에 넣어준다

.view{
padding: 0;
/*최소높이*/

min-height:332px;

    position: relative;
}

.view:after{
    content: "";
    width: 45%;/*173px*/
    height: 99%;
    position: absolute;
    left: 30%;
    top: 39px;
    background: url(./img/item.jpg) 0 0 no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}


/*view에 크기와 넓이 위치지정해주어서 이미지만 입력하면된다*/

.view.item2:after{
    background-image: url(./img/item2.jpg);
}

.view.item3::after {
    background-image: url(./img/item3.jpg);
}

previous버튼을 누르면 왼쪽그림나오고 next버튼누르면 오른쪽그림이나온다

privious버튼과 next버튼 화살표로바꾸기

위의 버튼 previous는 calss name이 previous는 slick-prev

next의 classname 은 slick-next로 나온다

저둘은 html에 내가 적은게아니고 slick을 script에 적어주면 웹페이지 element창에 나오게된다

classname을 css에 넣어서 화살표를 만들어보려고한다

일단 저둘의 버튼 테두리와 버튼 배경색을 없애보려고한다

.slick-prev, .slick-next {
/* 버튼테두리없애기*/
    border: none;
    /*배튼배경색 투명으로*/
    background-color: transparent;
}

privious버튼 위치지정

    .slick-prev {
    /*절대값부모위치에 맞게*/
    position: absolute;
    left: 0; /*privious는 왼쪽위치*/
    bottom: -45px;/*아래쪽에서 45px만큼올라감*/
    /* 겹치게 앞쪽나오게하기*/
    z-index: 1000;
    width: 30px; height: 30px;
    display: inline-block;
    /*텍스트뒤로보내기 안보이게*/
    text-indent: -9999px;
}

text-indent
기본값은 0

값이 양수이면 들여쓰기 음수이면 내어쓰기(왼쪽)

fontswsome에서 가져온 화살표 < 설정

/*fontawsome에서 가져옴*/
.slick-prev::before { /*왼쪽화살표*/
    content: "\f053";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    /* 폰트어썸사용시 위세개필요 */
    text-indent: 0;
    color: #027373;
    position: absolute; left: 9px; top: 0px;/*위치보이게*/
    font-size: 2em;
}

next 버튼 위치지정

.slick-next {
    /*절대값부모위치에 맞게 */
    position: absolute;
    right: 0;  /*next는 오른쪽위치*/
    bottom: -45px;/*아래쪽에서 45px만큼올라감*/
    z-index: 1000;/* 앞쪽나오게하기 */
    width: 30px; height: 30px;
    display: inline-block;
    text-indent: -9999px;/*텍스트뒤로보내기*/
}

fontswsome에서 가져온 화살표 > 설정

.slick-next::before {/*오른쪽화살표*/
    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    /* 위세개필요 */
    text-indent: 0;
    color: #027373;
    position: absolute; left: 9px; top: 0px;/*위치보이게*/
    font-size: 2em;
}

fontawsome사용시 fontawsome을 무료로 다운받던가 아니면 이메일 주소로 받아오기하면된다

이메일주소받아오기는 Strart for Free 클릭하면 이메일주소입력하라는 것이나온다 fontawsome링크를 받을 이메일을 입력하면된다

압축풀고나서

그안의 css폴더에 들어가서 all.css를 css모은 폴더에 넣어준다 그리고

html에 all.css경로도넣어준다

webfonts 폴더도 css html js 포함된 폴더에 넣어준다

docts 버튼을 동그라미로 만들기

script 나 js파일에dots:true를 넣어준다

그러면 123 버튼이 나오게된다

이버튼들을 가로로해서 동그라미로 나오게할것이다

$(function () {
            $('.single-item').slick({
                dots : true
            });
        });

위의 자바스크립트에 dots를 추가해주면 저렇게 element에 ul li들이 나오게 된다

ul classname slick-dots 을 이용해 css를 사용

li버튼 위치지정

.slick-dots{
        /*li동그라미없애기  */
        list-style: none;
        display: block;
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 40px;

    }

li버튼 위치지정 크기 마진

    .slick-dots li {
        /* 123버튼이 옆으로 붙는다 */
        display: inline-block;
        /* 너무 붙어있어서 마진준다 */
        margin: 5px;
        width: 15px;
        height: 15px; */
    }

li버튼 색 꾸미기

    .slick-dots li button {
        /* 버튼테두리없애주기 */
        border: none;
        /* 버튼배경투명색으로 */
        background-color: #c689ee;
        /* font-size : 0을 주면 글자가 보이지 않는다 */
        font-size: 0;
        /* 크기 */
        width: 15px; height: 15px;
        /* 버튼동그랗게 */
        border-radius: 50%;

    }

li버튼 지정된곳에 색변하게 주기

     .slick-dots li.slick-active button {
    /*slick-active버튼색바꾸기선택된부분진하게된다*/
         background-color: #7600ad;

}