인프런 커뮤니티 질문&답변
작성한 질문수
텝안에 slick slider
작성
·
977
·
수정됨
0
텝 메뉴 안에 slick slider 넣고 했는데 테스트 할땐 잘 됐는데 닷홈에 올리고 해보니까 첫번째 텝 메뉴는 슬라이드가 가로로 잘되는데 두번째 세번째 슬라이드는 가로가 아니고 세로로 돼요 ㅜㅜ 이것도 넣어봣는데 그대로네요,,
$(".slider").slick("refresh");답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
문제가 발생하는 부분은 CSS와 관련이 있을 수 있습니다. 테스트할 때 사용한 브라우저와 첨부한 호스팅 서비스에서 사용하는 브라우저가 다를 수 있습니다.
가로와 세로의 문제는 CSS에서 width와 height의 값을 확인해봐야 합니다. 두번째 세번째 슬라이드에서 문제가 발생한다면, 해당 탭에서 Slick slider의 width와 height가 css에서 어떻게 지정되었는지 확인해보세요.
예를 들어, 테스트할 때는 width: 100% 로 설정해서 가로로 되었다면, 호스팅 서비스에서는 해당 탭의 넓이가 충분하지 않은 경우나, 해당 탭에서 지정한 height 값이 원하는 크기와 다를 경우 발생할 수 있습니다.
만약 CSS에서는 문제가 없다면, JS에서 문제가 있는 것일 수도 있습니다. 위의 \((".slider").slick("refresh"); 코드보다 \)(“.slider”).slick(“unslick”).slick(); 와 같이 unslick() 메서드를 호출한 후 다시 slick() 메서드를 호출하여 슬라이더를 초기화해 보실 수도 있습니다.
더 자세한 내용은 코드나 코드 스니펫을 첨부해주신다면 더 정확한 도움을 드릴 수 있을 것 같습니다. 감사합니다.