slick이 깨진것 같아요ㅠㅠ
본문
slick을 사용했는데 아래처럼 나오는게 정상입니다
근데 오늘 확인을 해보니 제 브랜치에서 완전 깨져있더라구요 아무리봐도 어떻게 손을 봐야 할지 몰라서 글 올립니다
답변 2
CSS 및 JavaScript의 버전 충돌 또는 정상적으로 로드되지 않은 리소스에서 기인합니다.
Slick의 핵심 파일인 /connectPlay/slick/slick.css, /connectPlay/slick/slick-theme.css,
/connectPlay/slick/slick.min.js가 정상적으로 로드되고 있는지 확인하는 것이 가장 중요.
＊브라우저 개발자 도구(F12)의 Network 탭에서 해당 파일들이 200 OK로 로드되는지 확인.
＊만약 파일이 로드되지 않는다면 경로를 수정하거나 누락된 파일을 추가해야 합니다.
<head>
<!-- Slick CSS -->
<link rel="stylesheet" href="/connectPlay/slick/slick.css">
<link rel="stylesheet" href="/connectPlay/slick/slick-theme.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- Slick JS -->
<script src="/connectPlay/slick/slick.min.js"></script>
</head>
슬라이드가 포함된 컨테이너(예: .center)의 width와 height가 올바르게 설정되었는지 점검.
＊부모 요소가 display: none; 상태에서 slick이 초기화되면 슬라이드가 깨질 수 있습니다.
이 경우, slick의 resize 메서드를 호출하거나 부모 요소를 보이는 상태로 유지한 후
slick을 초기화하세요.
<style>
.center {
width: 80%; /* 슬라이드 컨테이너 크기 */
margin: 0 auto;
overflow: hidden;
}
.slick-slide img {
width: 100%; /* 슬라이드 내 이미지 크기 */
height: auto;
}
</style>
<div class="center">
<div><img src="/images/slide1.jpg" alt="Slide 1"></div>
<div><img src="/images/slide2.jpg" alt="Slide 2"></div>
<div><img src="/images/slide3.jpg" alt="Slide 3"></div>
</div>
<script>
$(document).ready(function () {
$('.center').slick({
centerMode: true,
centerPadding: '50px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
centerPadding: '20px',
},
},
],
});
});
</script>
Slick.js는 jQuery를 기반으로 작동하므로 jQuery가 slick.js보다 먼저 로드되어야 합니다.
＊<script src="https://code.jquery.com/jquery-latest.min.js"></script>
＊<script src="/connectPlay/slick/slick.min.js"></script>
위와 같은 순서로 로드되었는지 확인하세요.
순서가 올바르지 않다면 slick 초기화 코드가 동작하지 않을 가능성이 큽니다.
<!-- jQuery 로드 -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- Slick JS 로드 -->
<script src="/connectPlay/slick/slick.min.js"></script>
<!-- Slick 초기화 -->
<script>
$(document).ready(function () {
$('.center').slick({
dots: true, // 네비게이션 점 표시
infinite: true, // 무한 스크롤
speed: 500, // 전환 속도
slidesToShow: 3, // 보여줄 슬라이드 수
slidesToScroll: 1, // 한번에 넘길 슬라이드 수
});
});
</script>
★★★ 아래의 코드들을 참고하여, 설정을 검증 및 수정하여 보세요.
$(document).ready(function () {
$('.center').slick({
centerMode: true,
centerPadding: '100px',
slidesToShow: 5,
autoplay: true,
autoplaySpeed: 2500,
responsive: [
{
breakpoint: 1610,
settings: {
centerPadding: '100px',
slidesToShow: 4,
},
},
{
breakpoint: 1340,
settings: {
centerPadding: '40px',
slidesToShow: 3,
},
},
{
breakpoint: 1024,
settings: {
centerPadding: '40px',
slidesToShow: 2,
},
},
{
breakpoint: 768,
settings: {
centerPadding: '40px',
slidesToShow: 1,
},
},
{
breakpoint: 320,
settings: {
centerPadding: '20px',
slidesToShow: 1,
},
},
],
});
});
＊전체적으로 설정된 HTML과 JavaScript 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick Slider Example</title>
<link rel="stylesheet" href="/connectPlay/slick/slick.css">
<link rel="stylesheet" href="/connectPlay/slick/slick-theme.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/connectPlay/slick/slick.min.js"></script>
<style>
.center {
width: 80%;
margin: 0 auto;
}
.slick-slide img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="center">
<div><img src="/images/slide1.jpg" alt="Slide 1"></div>
<div><img src="/images/slide2.jpg" alt="Slide 2"></div>
<div><img src="/images/slide3.jpg" alt="Slide 3"></div>
</div>
<script>
$(document).ready(function () {
$('.center').slick({
centerMode: true,
centerPadding: '40px',
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
centerPadding: '20px',
},
},
],
});
});
</script>
</body>
</html>
답변 감사합니다!
로드 순서알려주신 대로 했는데도 에러가 발생해서 제가 저기에 영향이 갈만한 css나 스크립트를 건든게 아니라서 뭔가 slick 스크립트 코드내에서 카드들을 정렬하는 코드가 적용이 안되는것 같아서
// 교육후기 캐럴셀 가로정렬
$('.center').on('init', function() {
const slickTracks = document.querySelectorAll('.slick-track');
slickTracks.forEach(track => {
track.style.display = 'table-caption';
});
});
이 코드를 추가했더니 정상적으로 돌아가네요^^
아, 문제를 해결하셨다니 정말 다행입니다.
저도 덕분에 새로운 것을 배워갑니다.
감사합니다!
어딘가 수정해서 그런것이겠죠..
갑자기 그런경우는 없습니다.
일단 설정상의 문제이지 slick 자체는 오류없이 잘 작동하고 있습니다.
우선 최근 백업본으로 돌려보신 뒤에 채크한번 해보세요