목록으로

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

swannechristenswannenini 1년 전 조회 48,620

답변 5

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

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

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

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

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

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

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

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

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

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

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

감사합니다.

답변 기다리겠습니다.

#jquery #javascript #html #css

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

답변 5개

정렬:

채택된 답변

+20 포인트

미니님a Expert

1년 전

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

</p>

<p>$('.slider').slick('refresh');</p>

<p>

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

http://sir.kr/data/editor/2407/978180634_1721114835.9879.gif" width="100%" />

로그인 후 평가할 수 있습니다

답변에 대한 댓글 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]

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년 전

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

</p>

<p>...</p>

<p> </p>

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

<p> </p>

<p>

                    let carousel = function () {</p>

<p> </p>

<p>                        $('.slider').slick({

                            arrows: true,

                            prevArrow: "<img class='left-slider-arrow slick-prev' src='<a href="https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>"," target="_blank" rel="noopener noreferrer">https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>",</a>

                            nextArrow: "<img class='right-slider-arrow slick-next' src='<a href="https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>"," target="_blank" rel="noopener noreferrer">https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>",</a>

                            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);

                        });</p>

<p> </p>

<p>                        // $(".slider").slick("refresh");</p>

<p>                    };</p>

<p> </p>

<p>                    carousel();

                </script></p>

<p> </p>

<p>...</p>

<p> </p>

<p><!-- <script src="<a href="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js</a>" rel="noreferrer noopener" target="_blank"><a href="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js</a></a>"></script> --></p>

<p> </p>

<p>...</p>

<p> </p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

냐뮤냐

1년 전

감사합니다! 행복한 밤되세요!
일찍 보았으면 좋았을텐데,,,
방금 처리했어요 ㅎㅎ
그래도 공부하는데 도움이 될 것 같아요.

다시 한번 감사드립니다.

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

wodud3073

1년 전

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

</p>

<p><style></p>

<p>    .slider {</p>

<p>        width: 80%;</p>

<p>        margin: 20px auto;</p>

<p>        text-align: center;</p>

<p>        padding: 0;</p>

<p>    }</p>

<p> </p>

<p>    .slider .slide {</p>

<p>        display: flex;</p>

<p>        flex-direction: column;</p>

<p>        justify-content: center;</p>

<p>        align-items: center;</p>

<p>        padding: 0;</p>

<p>    }</p>

<p> </p>

<p>    .left-slider-arrow,</p>

<p>    .right-slider-arrow {</p>

<p>        width: 32px;</p>

<p>        height: auto;</p>

<p>    }</p>

<p> </p>

<p>    .left-slider-arrow {</p>

<p>        left: -60px;</p>

<p>    }</p>

<p> </p>

<p>    .right-slider-arrow {</p>

<p>        right: -60px;</p>

<p>    }</p>

<p></style></p>

<p> </p>

<p><div class="slider"></p>

<p>    <div class="slide"></p>

<p>        1</p>

<p>    </div></p>

<p>    <div class="slide"></p>

<p>        2</p>

<p>    </div></p>

<p>    <div class="slide"></p>

<p>        3</p>

<p>    </div></p>

<p>    <div class="slide"></p>

<p>        4</p>

<p>    </div></p>

<p>    <div class="slide"></p>

<p>        5</p>

<p>    </div></p>

<p>    <div class="slide"></p>

<p>        6</p>

<p>    </div></p>

<p>    <div class="slide"></p>

<p>        7</p>

<p>    </div></p>

<p>    <div class="slide"></p>

<p>        8</p>

<p>    </div></p>

<p></div></p>

<p> </p>

<p><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script></a></p>

<p><link rel="stylesheet" type="text/css" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/></a></p>

<p><link rel="stylesheet" type="text/css" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/></a></p>

<p><script type="text/javascript" src="<a href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script></a></p>

<p>



 </p>

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

<p>    let carousel = function() {</p>

<p>        $('.slider').slick({</p>

<p>            arrows: true,</p>

<p>            prevArrow: "<img class='left-slider-arrow slick-prev' src='<a href="https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>"," target="_blank" rel="noopener noreferrer">https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee0140311ada418533d_left-slider-arrow.svg'>",</a></p>

<p>            nextArrow: "<img class='right-slider-arrow slick-next' src='<a href="https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>"," target="_blank" rel="noopener noreferrer">https://uploads-ssl.webflow.com/5ffc7d9c41880c19fc8b613a/62423ee54a33c9a2cf14e0de_right-slider-arrow.svg'>",</a></p>

<p>            speed: 1000,</p>

<p>            infinite: true,</p>

<p>            pauseOnHover: false,</p>

<p>            autoplay: true,</p>

<p>            autoplaySpeed: 2000,</p>

<p>            slidesToShow: 6,</p>

<p>            slidesToScroll: 1,</p>

<p>            responsive: [{</p>

<p>                    breakpoint: 1024,</p>

<p>                    settings: {</p>

<p>                        slidesToShow: 4</p>

<p>                    }</p>

<p>                },</p>

<p>                {</p>

<p>                    breakpoint: 768,</p>

<p>                    settings: {</p>

<p>                        slidesToShow: 3</p>

<p>                    }</p>

<p>                },</p>

<p>                {</p>

<p>                    breakpoint: 580,</p>

<p>                    settings: {</p>

<p>                        slidesToShow: 2</p>

<p>                    }</p>

<p>                },</p>

<p>                {</p>

<p>                    breakpoint: 480,</p>

<p>                    settings: {</p>

<p>                        slidesToShow: 1</p>

<p>                    }</p>

<p>                }</p>

<p>            ]</p>

<p>        });</p>

<p>    };</p>

<p> </p>

<p>    carousel();</p>

<p></script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 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 Expert

1년 전

어떤게 문제인지 알 수 없네요 잘 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

�

냐뮤냐

1년 전

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

�

미니님a

1년 전

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

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

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

�

미니님a

1년 전

예제 사이트는 swiper 인데 다른 메뉴인가요 ?

�

냐뮤냐

1년 전

네 맞습니다.
swiper 는 다른 부분이에요.
slick 은 상단 쪽? 화살표 부분입니다.
처음 들어가시면 뭉쳐서 나와요.

�

냐뮤냐

1년 전

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

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

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

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

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

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

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

wodud3073

1년 전

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

로그인 후 평가할 수 있습니다

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

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

로그인

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

답변 5개

답변에 대한 댓글 1개

답변에 대한 댓글 1개

답변에 대한 댓글 2개

답변에 대한 댓글 5개

공유하기