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');
아래 움짤 보시면 잘되는거 확인되실꺼에요
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
}
}
]
});
슬릭 src까지 올려주셔야 같은 버전에서 테스트가 가능합니다.
어떤게 문제인지 알 수 없네요 잘 됩니다.
네.. 분명 잘 사용해 왔고, 문제 없었습니다. 다만 지금 프로젝트에 대해서
어떤 부분이 겹치는(?) 충돌인지(?) 모르게 slick-track 부분이 0으로 나오고 있습니다..
.slick-track( width: 100% !important); css 를 주게 되면 깨져버리는 현상이 옵니다.
어떻게 해야할까요?
질문자님께서 "그대로 코드 복사해서 테스트 가능" 이라고 해서, 이상 없음을 알려드렸습니다.
현재 에러나는 프로젝트 내 주소를 공유하지 않으면, 답이 어렵지 않을까요 ?
잘되는걸 안된다고 하시니...
예제 사이트는 swiper 인데 다른 메뉴인가요 ?
네 맞습니다.
swiper 는 다른 부분이에요.
slick 은 상단 쪽? 화살표 부분입니다.
처음 들어가시면 뭉쳐서 나와요.
시간을 내주셔서 감사해요!
저에게는 많이 알아가는 좋은 시간이었어요.
하지만, 결국 안돼네요.
심각한 에러가 발생해요.
외부 플러그인 사용이 이렇게 난해할 줄 몰랐어요.
오늘 처음 알았네요.
항상 처음의 처음이네요!
좋은 시간이었어요.
지금은 해결 못했지만, 언젠가 되는 날이 있겠지요....
계속 해봐야겠네요.
저는 영어/일본 사이트만 가서 국내는 처음이에요
채택하기 누르면 되는건가여?
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가지 이유 중에 문제가 있을까요?
url 을주시면 개발자도구로 점검해볼게요!
다음 코드가 도움이 될지 모르겠습니다.
...
<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> -->
...
감사합니다! 행복한 밤되세요!
일찍 보았으면 좋았을텐데,,,
방금 처리했어요 ㅎㅎ
그래도 공부하는데 도움이 될 것 같아요.
다시 한번 감사드립니다.