tab 메뉴 안에 slick 슬라이드 넣을 때 문제
본문
안녕하세요! tab메뉴 안에 슬라이드를 넣어야 해서 slick을 사용해서 넣어보았는데요.
첫번째 탭에서는 slick이 제대로 돌아가다가, 두번째 탭에서는 slick의 크기들이 안 잡혀서 엉망으로 나오는 현상이 발생합니다.ㅜ_ㅜ... 화살표 버튼을 클릭하면 다시 크기가 잡혀보이고요. 해결방법이 없을까요?
ㅜ-ㅜ...정말 간절합니다 ㅇ<-<...
HTML
<section id="section5" class="inner">
<div class="sec5-left"><!--sec5-left열기-->
<div class="tabSet">
<ul class="tabs">
<li><a phref="#panel1-1" class="on">메뉴1</a></li>
<li><a phref="#panel1-2">메뉴2</a></li>
<li><a phref="#panel1-3">메뉴3</a></li>
<li><a phref="#panel1-4">메뉴4</a></li>
<li><a phref="#panel1-5">메뉴5</a></li>
</ul>
<div class="panels">
<div class="panel" id="panel1-1">
<section class="regular slider">
<a href="#"><div>
<div>
<h2>슬라이드 제목</h2>
</div>
<div class="slide-contents">
<img src="./images/img1.jpg" alt="사진자료 자세히 보기">
<p>자세히보기+</p>
</div>
</div></a>
<a href="#"><div>
<div>
<h2>슬라이드 제목</h2>
</div>
<div class="slide-contents">
<img src="./images/img1.jpg" alt="사진자료 자세히 보기">
<p>자세히보기+</p>
</div>
</div></a>
<a href="#"><div>
<div>
<h2>슬라이드 제목</h2>
</div>
<div class="slide-contents">
<img src="./images/img1.jpg" alt="사진자료 자세히 보기">
<p>자세히보기+</p>
</div>
</div></a>
<div>
<img src="slick_img/350.jpg">
</div>
<div>
<img src="slick_img/350.jpg">
</div>
</section>
</div>
<div class="panel" id="panel1-2">
<section class="regular slider">
<a href="#"><div>
<div>
<h2>슬라이드 제목</h2>
</div>
<div class="slide-contents">
<img src="./images/img1.jpg" alt="사진자료 자세히 보기">
<p>자세히보기+</p>
</div>
</div></a>
<a href="#"><div>
<div>
<h2>슬라이드제목</h2>
</div>
<div class="slide-contents">
<img src="./images/img1.jpg" alt="사진자료 자세히 보기">
<p>자세히보기+</p>
</div>
</div></a>
<a href="#"><div>
<div>
<h2>슬라이드 제목</h2>
</div>
<div class="slide-contents">
<img src="./images/img1.jpg" alt="사진자료 자세히 보기">
<p>자세히보기+</p>
</div>
</div></a>
<div>
<img src="slick_img/350.jpg">
</div>
<div>
<img src="slick_img/350.jpg">
</div>
</section>
</div>
<div class="panel" id="panel1-3">At ipsum scripta efficiantur nec. Perpetua vituperata quaerendum vix ne, pri ne veri liber apeirian. Vidisse lucilius facilisi ei vix, vim ei quod esse atqui, error placerat molestiae eam cu. Denique albucius quo ad, eos eu malis assum.</div>
<div class="panel" id="panel1-4">At malis laoreet his. Ex vix prima primis, ne qui iudico alienum. Te enim iriure fuisset eos, ei mei nihil saepe soleat, has alienum postulant in. Quem accusamus constituam qui ea, id dolorum expetendis per. Vis in ferri quaeque. Suscipit phaedrum vulputate cum eu. Usu te quot ignota timeam, ex sed magna nusquam, ex eum esse omnis.</div>
<div class="panel" id="panel1-5">At malis laoreet his. Ex vix prima primis, ne qui iudico alienum. Te enim iriure fuisset eos, ei mei nihil saepe soleat, has alienum postulant in. Quem accusamus constituam qui ea, id dolorum expetendis per. Vis in ferri quaeque. Suscipit phaedrum vulputate cum eu. Usu te quot ignota timeam, ex sed magna nusquam, ex eum esse omnis.</div>
<!-- /panels --></div>
<!-- /tabset --></div>
</div>
CSS
/*sec5 탭*/
#section5 {
margin-bottom: 100px
}
#section5 .tabSet{
margin-bottom:30px; display: flex;
position: relative;
}
#section5 .tabSet ul.tabs {
overflow: hidden;
padding: 84px 28px 78px 30px;
background-color: #F47A2D;
width: 52%;
height: 421px;
}
#section5 .tabSet ul.tabs li{
float:left;
padding:0 2px 0 0;
list-style-type:none;
}
#section5 .tabSet ul.tabs li a{
float:left;
color: #b95110;
background:#F47A2D;
padding: 0px 19px 10px 10px;
display:block;
border-radius:3px 3px 0 0;
font-size:14px;
text-decoration:none;
border:0;cursor:pointer;
font-size:1.1rem;
font-family : 'NanumSquareR';
transition: 0.5s;
}
#section5 .tabSet ul.tabs li a.on{
color:#fff;
margin-bottom:1px solid #fff;
cursor:pointer;
; font-weight:bold;
border-bottom:1px solid #fff;
font-family : 'NanumSquareR';
transform: scale(1.1);
}
#section5 .tabSet ul.tabs li a.on:hover{
text-decoration:none;
}
#section5 .tabSet ul.tabs li a.on::before{
content: '';
background-image: url(../images/right-arrows.png);
margin-right: 10px;
background-repeat: no-repeat;
background-size: 40px;
background-position: center;
width:50px;height: 30px;
display: inline-block;
transform: translateY(10px);
}
#section5 .panels{
background:transparent;
min-height:180px;
position: absolute;
width:80%;
height: 487px; right:0;bottom:-30px;
}
#section5 .panel{
position: relative;
padding:30px 0px;
font-size:14px;
color:#4d4d4d;
display:none;
}
#section5 .tabs{
flex-direction: column;
}
/* sec5 슬라이드*/
#section5 .slick-slide>div{
border: 1px solid rgb(228, 228, 228); margin-right: 15px;
background-color: #fff;
height: 421px;text-align: center;transition: 0.3s;}
#section5 .slick-slide>div:hover{
transform: scale(0.98);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.123);
}
#section5 .slick-slide h2{
font-size: 0.9rem;padding-bottom: 22px;
border-bottom: 1px solid #ccc; font-family : 'NanumSquareB';
}
#section5 .slick-arrow{
border: 0;
background-color: transparent;
font-size: 0;
}
#section5 .slick-prev{
position: absolute;
top: -28px; left: 23%;
background-image: url(../images/mall_arrow01\ .png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
width:100px;height: 100px;
cursor: pointer; z-index: 99999999;
}
#section5 .slick-next{
position: absolute;
top: -28px;
left: 30%; background-image: url(../images/mall_arrow02.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
width:100px;height: 100px;
cursor: pointer;
}
#section5 .slick-track{
margin-top: 55px;
}
#section5 .slide-contents{
margin-top:20px;height: 300px;
}
#section5 .slide-contents>img{
height: 250px;}
#section5 .slide-contents>p{
margin-top: 24px;
font-family : 'NanumSquareB';
font-size: 1rem;
}
#section5 .regular a{
display: block;
width:100%; height: 437px;
padding:30px; padding-top: 35px;
}
JS
//sec5 탭
$('.tabSet').each(function(){
var anchor = $(this).find('.tabs a');
var anchor_on = $(this).find('.tabs a.on');
var phref_on = anchor_on.attr('phref');
var this_panel = $(this).find('.panel')
$(phref_on).show();
anchor.each(function(){
var phref = $(this).attr('phref');
$(this).click(function(){
this_panel.hide();
anchor.removeClass('on');
$(phref).show();
$(this).addClass('on');
}) //click
}) //anchor
}) //tabSet
//sec5 슬라이드
$("#section5 .regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
dots : false,
});
답변 1
slick 슬라이더를 제가 사용해 보진 않았지만 다른 슬라이더를 연동할때도 보통 저런 오류가 나오더라구요.
저같은 경우엔 젤 처음 초기화할때 첫화면의 슬라이더를 보이게끔 설정한후
탭화면 처리해 주는 부분에서
if(!slider1){
slider1=$("#section5 .regular").slick({
.... //슬라이더 설정부분
}
이런식으로 변수에 슬라이더를 저장해놓고 탭을 변경할때 해당변수값이 있는지 체크해서 없을경우
탭을 클릭했을때 슬라이더를 생성주는 방식으로 처리했습니다. 그러면 화면의 높이나 넓이를 인식해서
정상적으로 나오더라구요.
