slick-track width초기값 0 에 대한 질문입니다.

slick-track width초기값 0 에 대한 질문입니다.

QA

slick-track width초기값 0 에 대한 질문입니다.

본문

안녕하세요 처음 질문올려봅니다 잘부탁드립니다.

 

slick 클라스 를 잘 주었고 전혀 문제 될 것이 없어요.

하지만 소스 보기에서 slick-track width값이 0으로 나오는 바람에

처음에 이미지들이 뭉쳐서 나오고 사이즈나 이동시 제대로 나오고 있습니다.

 

인터넷 찾아봐도, 모두 같은 내용이고

문제 사항들 그대로 수정해서 진행해 보았지만 여전해요.

 

잘 사용이 되는 코드를 다운 받아 가져온 다음 복붙해봐도 같은 증상이에요.

 


<style>
                            .slider {
                                width: 80%;
                                margin: 20px auto;
                                text-align: center;
                                padding: 0;
                            }
 
                            .slider .slide {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                padding: 0;
                            }
 
                            .left-slider-arrow,
                            .right-slider-arrow {
                                width: 32px;
                                height: auto;
                            }
 
                            .left-slider-arrow {
                                left: -60px;
                            }
 
                            .right-slider-arrow {
                                right: -60px;
                            }
                        </style>

 <div class="slider">
                            <div class="slide">
                                1
                            </div>
                            <div class="slide">
                                2
                            </div>
                            <div class="slide">
                                3
                            </div>
                            <div class="slide">
                                4
                            </div>
                            <div class="slide">
                                5
                            </div>
                            <div class="slide">
                                6
                            </div>
                            <div class="slide">
                                7
                            </div>
                            <div class="slide">
                                8
                            </div>
                        </div>

<script type="text/javascript">
                    let carousel = function () {
                        $('.slider').slick({
                            arrows: true,
                            prevArrow: "<img class='left-slider-arrow slick-prev' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>",
                            nextArrow: "<img class='right-slider-arrow slick-next' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>",
                            speed: 1000,
                            infinite: true,
                            pauseOnHover: false,
                            autoplay: true,
                            autoplaySpeed: 2000,
                            slidesToShow: 6,
                            slidesToScroll: 1,
                            responsive: [
                                {
                                    breakpoint: 1024,
                                    settings: {
                                        slidesToShow: 4
                                    }
                                },
                                {
                                    breakpoint: 768,
                                    settings: {
                                        slidesToShow: 3
                                    }
                                },
                                {
                                    breakpoint: 580,
                                    settings: {
                                        slidesToShow: 2
                                    }
                                },
                                {
                                    breakpoint: 480,
                                    settings: {
                                        slidesToShow: 1
                                    }
                                }
                            ]
                        });
                    };
 
                    carousel();
                </script>

 

제가 보기에 아무리 봐도 문제가 없어요,

만약 코드들 중 외적인 부분이 있다면,,

어느 부분일지도 말씀 부탁드려요..

 

여기 작성된 코드는 일반 html에 작성하면 잘 나옵니다.


감사합니다.

답변 기다리겠습니다.

 

이 질문에 댓글 쓰기 :

답변 5

slick 코드 실행 전 리프레시 한번 해주세요

 


$('.slider').slick('refresh');

 

아래 움짤 보시면 잘되는거 확인되실꺼에요

978180634_1721114835.9879.gif

slick 코드 실행 전 이라고 언급해드렸으니 코드를 아래 처럼 변경 하세요
2가지입니다.

1번


$('.slider').slick('unslick').slick({
                            arrows: true,
                            prevArrow: "<img class='left-slider-arrow slick-prev' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>",
                            nextArrow: "<img class='right-slider-arrow slick-next' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>",
                            speed: 1000,
                            infinite: true,
                            pauseOnHover: false,
                            autoplay: false,
                            autoplaySpeed: 2000,
                            slidesToShow: 6,
                            slidesToScroll: 1,
                            responsive: [
                                {
                                    breakpoint: 1024,
                                    settings: {
                                        slidesToShow: 4
                                    }
                                },
                                {
                                    breakpoint: 768,
                                    settings: {
                                        slidesToShow: 3
                                    }
                                },
                                {
                                    breakpoint: 580,
                                    settings: {
                                        slidesToShow: 2
                                    }
                                },
                                {
                                    breakpoint: 480,
                                    settings: {
                                        slidesToShow: 1
                                    }
                                }
                            ]
                        });


2번


$('.slider').slick('refresh').slick({
                            arrows: true,
                            prevArrow: "<img class='left-slider-arrow slick-prev' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>",
                            nextArrow: "<img class='right-slider-arrow slick-next' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>",
                            speed: 1000,
                            infinite: true,
                            pauseOnHover: false,
                            autoplay: false,
                            autoplaySpeed: 2000,
                            slidesToShow: 6,
                            slidesToScroll: 1,
                            responsive: [
                                {
                                    breakpoint: 1024,
                                    settings: {
                                        slidesToShow: 4
                                    }
                                },
                                {
                                    breakpoint: 768,
                                    settings: {
                                        slidesToShow: 3
                                    }
                                },
                                {
                                    breakpoint: 580,
                                    settings: {
                                        slidesToShow: 2
                                    }
                                },
                                {
                                    breakpoint: 480,
                                    settings: {
                                        slidesToShow: 1
                                    }
                                }
                            ]
                        });

어떤게 문제인지 알 수 없네요 잘 됩니다.thumb-978180634_1721109413.0791_730x362.gif

네.. 분명 잘 사용해 왔고, 문제 없었습니다. 다만 지금 프로젝트에 대해서
어떤 부분이 겹치는(?) 충돌인지(?) 모르게 slick-track 부분이 0으로 나오고 있습니다..
.slick-track( width: 100% !important); css 를 주게 되면 깨져버리는 현상이 옵니다.
어떻게 해야할까요?

질문자님께서 "그대로 코드 복사해서 테스트 가능" 이라고 해서, 이상 없음을 알려드렸습니다.

현재 에러나는 프로젝트 내 주소를 공유하지 않으면, 답이 어렵지 않을까요 ?

잘되는걸 안된다고 하시니...

시간을 내주셔서 감사해요!
저에게는 많이 알아가는 좋은 시간이었어요.

하지만, 결국 안돼네요.
심각한 에러가 발생해요.

외부 플러그인 사용이 이렇게 난해할 줄 몰랐어요.
오늘 처음 알았네요.

항상 처음의 처음이네요!
좋은 시간이었어요.

지금은 해결 못했지만, 언젠가 되는 날이 있겠지요....
계속 해봐야겠네요.

저는 영어/일본 사이트만 가서 국내는 처음이에요
채택하기 누르면 되는건가여?

cdn으로 샘플생성시 문제없어보입니다.

 


<style>
    .slider {
        width: 80%;
        margin: 20px auto;
        text-align: center;
        padding: 0;
    }
 
    .slider .slide {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
    }
 
    .left-slider-arrow,
    .right-slider-arrow {
        width: 32px;
        height: auto;
    }
 
    .left-slider-arrow {
        left: -60px;
    }
 
    .right-slider-arrow {
        right: -60px;
    }
</style>
 
<div class="slider">
    <div class="slide">
        1
    </div>
    <div class="slide">
        2
    </div>
    <div class="slide">
        3
    </div>
    <div class="slide">
        4
    </div>
    <div class="slide">
        5
    </div>
    <div class="slide">
        6
    </div>
    <div class="slide">
        7
    </div>
    <div class="slide">
        8
    </div>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

 
<script type="text/javascript">
    let carousel = function() {
        $('.slider').slick({
            arrows: true,
            prevArrow: "<img class='left-slider-arrow slick-prev' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>",
            nextArrow: "<img class='right-slider-arrow slick-next' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>",
            speed: 1000,
            infinite: true,
            pauseOnHover: false,
            autoplay: true,
            autoplaySpeed: 2000,
            slidesToShow: 6,
            slidesToScroll: 1,
            responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 4
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 580,
                    settings: {
                        slidesToShow: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        });
    };
 
    carousel();
</script>

네.. 분명 잘 사용해 왔고, 문제 없었습니다. 다만 지금 프로젝트에 대해서
어떤 부분이 겹치는(?) 충돌인지(?) 모르게 slick-track 부분이 0으로 나오고 있습니다..
.slick-track( width: 100% !important); css 를 주게 되면 깨져버리는 현상이 옵니다.
어떤 부분이 slick-track 에 영향을 주게 되는 부분일까요?

1. 바로 위에 마크업에는 단지 div 한번 묶고,
2. 그 바로 위에는 flex로 가운데 정렬이 끝입니다.
3. swiper slider를 이미 한번 사용했습니다.(커스터마이징을 많이 해서 slick을 사용하려 합니다.)

3가지 이유 중에 문제가 있을까요?

다음 코드가 도움이 될지 모르겠습니다.

 


...
 
                <script type="text/javascript">
 

                    let carousel = function () {
 
                        $('.slider').slick({
                            arrows: true,
                            prevArrow: "<img class='left-slider-arrow slick-prev' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>",
                            nextArrow: "<img class='right-slider-arrow slick-next' src='https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>",
                            speed: 1000,
                            infinite: true,
                            pauseOnHover: false,
                            autoplay: false,
                            autoplaySpeed: 2000,
                            slidesToShow: 6,
                            slidesToScroll: 1,
                            responsive: [
                                {
                                    breakpoint: 1024,
                                    settings: {
                                        slidesToShow: 4
                                    }
                                },
                                {
                                    breakpoint: 768,
                                    settings: {
                                        slidesToShow: 3
                                    }
                                },
                                {
                                    breakpoint: 580,
                                    settings: {
                                        slidesToShow: 2
                                    }
                                },
                                {
                                    breakpoint: 480,
                                    settings: {
                                        slidesToShow: 1
                                    }
                                }
                            ]
                        }).on('setPosition', function (slick) {
                            var slick_list = $(slick.target).children('.slick-list');
                            var slick_list_t = setInterval(function () {
                                if (slick_list.width() > 0) {
                                    clearInterval(slick_list_t);
                                    $(window).trigger('resize');
                                }
                            }, 100);
                        });
 
                        // $(".slider").slick("refresh");
                    };
 
                    carousel();
                </script>
 
...
 
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
 
...
 
답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT