[slick]slick dot 동그라미로 커스텀

slick 커스텀

위의 사진처럼 slick을 커스텀할 예정이다..

다들 코드를 적용하기전 slick을 사용할 수있도록 셋팅 바랍니당.

<div class="mainRow1">
    <h2><span style="color: #41578a;">예시</span> 미디어 칼럼</h2>
    <div class="slick">
        <div><iframe width="680px" height="400" src="유투브 링크"></iframe></div>
        <div><iframe width="680px;" height="400" src=""유툽링크></iframe></div>
        <div><iframe width="680px" height="400" src="유툽링크"></iframe></div>
    </div>
    <div class="Slick-Navigation">
    </div>
</div>

우선 제가 지금 제작하고 있는 곳에서 유트브를 슬릭으로 만들려고 합니다.

html 구조를 저렇게 만들어주시고

<style type="text/css">
    .mainRow1{
        width: calc(100% - 40px);
        margin: 0 auto;
        margin-bottom: 100px;
    }
    .slick-dots {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        gap: 10px;
    }

    /* 슬라이더 점을 원으로 만들고 기본 색상을 설정합니다 */
    .slick-dots li button {
        width: 13px;
        height: 13px;
        border: none;
        background-color: #333;
        border-radius: 7px;
        color: transparent;
        font-size: 0;
    }

    /* 활성화된 슬라이드의 점 색상을 변경합니다 */
    .slick-dots li.slick-active button {
        background-color: #41578a;
    }

</style>
<script>
    $(document).ready(function () {
        $('.slick').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            draggable: true,  
            arrows: false,   
            dots: true, 
            autoplaySpeed: 3000,
        });
    });
</script>

css랑 script를 저런식으로 짜주시면됩니다.