slick이 깨진것 같아요ㅠㅠ 채택완료
slick을 사용했는데 아래처럼 나오는게 정상입니다http://sir.kr/data/editor/2412/1025892588_1735540292.4083.png" width="100%" />
근데 오늘 확인을 해보니 제 브랜치에서 완전 깨져있더라구요 아무리봐도 어떻게 손을 봐야 할지 몰라서 글 올립니다
답변 2개
CSS 및 JavaScript의 버전 충돌 또는 정상적으로 로드되지 않은 리소스에서 기인합니다.
Slick의 핵심 파일인 /connectPlay/slick/slick.css, /connectPlay/slick/slick-theme.css,
/connectPlay/slick/slick.min.js가 정상적으로 로드되고 있는지 확인하는 것이 가장 중요.
＊브라우저 개발자 도구(F12)의 Network 탭에서 해당 파일들이 200 OK로 로드되는지 확인.
＊만약 파일이 로드되지 않는다면 경로를 수정하거나 누락된 파일을 추가해야 합니다.
</p>
<p><head>
<!-- Slick CSS -->
<link rel="stylesheet" href="/connectPlay/slick/slick.css">
<link rel="stylesheet" href="/connectPlay/slick/slick-theme.css"></p>
<p> <!-- jQuery -->
<script src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a></p>
<p> <!-- Slick JS -->
<script src="/connectPlay/slick/slick.min.js"></script>
</head></p>
<p>
슬라이드가 포함된 컨테이너(예: .center)의 width와 height가 올바르게 설정되었는지 점검.
＊부모 요소가 display: none; 상태에서 slick이 초기화되면 슬라이드가 깨질 수 있습니다.
이 경우, slick의 resize 메서드를 호출하거나 부모 요소를 보이는 상태로 유지한 후
slick을 초기화하세요.
</p>
<p><style>
.center {
width: 80%; /* 슬라이드 컨테이너 크기 */
margin: 0 auto;
overflow: hidden;
}
.slick-slide img {
width: 100%; /* 슬라이드 내 이미지 크기 */
height: auto;
}
</style></p>
<p><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></p>
<p><script>
$(document).ready(function () {
$('.center').slick({
centerMode: true,
centerPadding: '50px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
centerPadding: '20px',
},
},
],
});
});
</script></p>
<p>
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 초기화 코드가 동작하지 않을 가능성이 큽니다.
</p>
<p><!-- jQuery 로드 -->
<script src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a></p>
<p><!-- Slick JS 로드 -->
<script src="/connectPlay/slick/slick.min.js"></script></p>
<p><!-- Slick 초기화 -->
<script>
$(document).ready(function () {
$('.center').slick({
dots: true, // 네비게이션 점 표시
infinite: true, // 무한 스크롤
speed: 500, // 전환 속도
slidesToShow: 3, // 보여줄 슬라이드 수
slidesToScroll: 1, // 한번에 넘길 슬라이드 수
});
});
</script></p>
<p>
★★★ 아래의 코드들을 참고하여, 설정을 검증 및 수정하여 보세요.
</p>
<p>$(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,
},
},
],
});
});</p>
<p>＊전체적으로 설정된 HTML과 JavaScript 예시
</p>
<p><!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="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a>
<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></p>
<p>답변에 대한 댓글 2개
저도 덕분에 새로운 것을 배워갑니다.
감사합니다!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
로드 순서알려주신 대로 했는데도 에러가 발생해서 제가 저기에 영향이 갈만한 css나 스크립트를 건든게 아니라서 뭔가 slick 스크립트 코드내에서 카드들을 정렬하는 코드가 적용이 안되는것 같아서
[code]
// 교육후기 캐럴셀 가로정렬
$('.center').on('init', function() {
const slickTracks = document.querySelectorAll('.slick-track');
slickTracks.forEach(track => {
track.style.display = 'table-caption';
});
});
[/code]
이 코드를 추가했더니 정상적으로 돌아가네요^^