탭 슬라이더

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

작성

605

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

선생님,

탭 슬라이더를 포트폴리오로 응용할 때

여러 개의 탭버튼 안에 슬라이더를 넣어 구현하려고 하는데요.

input과 slick.js 로 응용해서 첫 번째 탭버튼에서는 슬라이더가 잘 먹힙니다.

두번째 탭부터는 내부에 적용한 슬라이더가 깨지고 먹히지 않아요..

구글링을 해서 몇몇 개를 살펴봤는데 코드가 정확한건지 헷갈려서 질문으로 남깁니다.

jquery HTML/CSS

답변 1

코딩웍스(Coding Works)

지식공유자

input으로 탭메뉴 만들고 그 안에 slick으로 만드는 경우 가끔 말씀하신 경우가 있는 것 봤습니다.

글로만으로는 어떤 현상인지는 자세히 알기는 어렵지만 아래 방법으로 해보세요.

저도 이런 문제가 있는 학생들 해결해주느라 구글링했던 것 같습니다.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.tab-items {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

</style>

</head>

<body>

<label for="tab3">Hover-Animation</label>

<label for="tab4">Navigation</label>

<label for="tab5">Prototype</label>

<label for="tab6">Tab-content</label>

</div>

</div>

$('.btn label').click(function() {

$('.tab-items').resize(); // 팝업 열때 슬라이드 깨짐 방지

$('.tab-items').slick('refresh'); // 팝업 열때 슬라이드 깨짐 방지

})

</script>

</body>

</html>

ppoppi

질문자

도움주셔서 감사합니다! 더 열심히 공부해봐야겠습니다.

김승연

  $('.class-slide').slick('slickGoTo', 0);

김승연

위의 소스 추가해보세요~ 두번째 세번째 탭도 잘 열립니다

인프런 커뮤니티 질문&답변

탭 슬라이더