SIR
이전 목록 다음
채택완료

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

swannechristenswannenini
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 49,582

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

 

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

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

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

 

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

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

 

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

 

Copy 
<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>

Copy 
<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>

Copy 
<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에 작성하면 잘 나옵니다.


감사합니다.

답변 기다리겠습니다.

 

jquery javascript html css
|

답변 5개 / 댓글 9개

채택된 답변
+20 포인트
미미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

 

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

 

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

978180634_1721114835.9879.gif

답변에 대한 댓글 1개

미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
slick 코드 실행 전 이라고 언급해드렸으니 코드를 아래 처럼 변경 하세요
2가지입니다.

1번
[code]
$('.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
}
}
]
});
[/code]

2번

[code]
$('.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
}
}
]
});
[/code]
배배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

 

Copy 
...

 

                <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개

냐뮤냐
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
감사합니다! 행복한 밤되세요!
일찍 보았으면 좋았을텐데,,,
방금 처리했어요 ㅎㅎ
그래도 공부하는데 도움이 될 것 같아요.

다시 한번 감사드립니다.
킹콩랩스
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

 

Copy 
<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>

답변에 대한 댓글 2개

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

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

3가지 이유 중에 문제가 있을까요?
wodud3073
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
url 을주시면 개발자도구로 점검해볼게요!
미미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

답변에 대한 댓글 5개

냐뮤냐
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
네.. 분명 잘 사용해 왔고, 문제 없었습니다. 다만 지금 프로젝트에 대해서
어떤 부분이 겹치는(?) 충돌인지(?) 모르게 slick-track 부분이 0으로 나오고 있습니다..
.slick-track( width: 100% !important); css 를 주게 되면 깨져버리는 현상이 옵니다.
어떻게 해야할까요?
미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
질문자님께서 "그대로 코드 복사해서 테스트 가능" 이라고 해서, 이상 없음을 알려드렸습니다.

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

잘되는걸 안된다고 하시니...
미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
예제 사이트는 swiper 인데 다른 메뉴인가요 ?
냐뮤냐
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
네 맞습니다.
swiper 는 다른 부분이에요.
slick 은 상단 쪽? 화살표 부분입니다.
처음 들어가시면 뭉쳐서 나와요.
냐뮤냐
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
시간을 내주셔서 감사해요!
저에게는 많이 알아가는 좋은 시간이었어요.

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

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

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

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

저는 영어/일본 사이트만 가서 국내는 처음이에요
채택하기 누르면 되는건가여?
킹콩랩스
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

슬릭 src까지 올려주셔야 같은 버전에서 테스트가 가능합니다.

답변을 작성하려면 로그인이 필요합니다.

🐛 버그신고