13. tabSlide
예제
HTML
<!DOCTYPE html>
<html>
<head>
<title>Carousel with Tabs and Lightbox</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div class="tabs">
<div class="tab-button-outer">
<div id="tab1" class="tab-button active">Tab 1</div>
<div id="tab2" class="tab-button">Tab 2</div>
<div id="tab3" class="tab-button">Tab 3</div>
</div>
<div id="content1" class="tab-content active carousel">
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/1.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/1.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/2.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/2.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/3.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/3.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/4.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/4.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/5.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/5.jpg" /></div>
</div>
<div id="content2" class="tab-content carousel">
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/5.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/5.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/6.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/6.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/7.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/7.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/8.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/8.jpg" /></div>
</div>
<div id="content3" class="tab-content carousel">
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/1.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/1.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/2.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/2.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/3.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/3.jpg" /></div>
<div class="popup-outer"><a href="http://qwerew.cafe24.com/images/4.jpg" class="popup">클릭</a><img src="http://qwerew.cafe24.com/images/4.jpg" /></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="js.js"></script>
</body>
</html>
CSS
.tabs {
margin: 50px;
}
.tab-button-outer {
display: flex;
justify-content: center;
}
.tab-button {
background-color: #ccc;
padding: 10px 20px;
cursor: pointer;
}
.tab-button:hover {
background-color: #ddd;
}
.tab-button.active {
background-color: #bbb;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.carousel {
width: 300px;
margin: 50px auto;
}
.carousel img {
width: 100%;
margin: 0 auto;
}
.popup{position:absolute; display:block; background:white;}
JS
$('#content1.carousel').slick({ slidesToShow: 2 });
$('.tab-button').on('click', function () {
const tabButtonId = $(this).attr('id');
$('.tab-button').removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
//변수tabButtonId 의 값을 이용하여 content1 로 편집
const targetContent = $('#' + 'content' + tabButtonId.slice(-1));
targetContent.addClass('active');
if (targetContent.hasClass('slick-initialized')) {
targetContent.slick('unslick');
}
targetContent.slick({ slidesToShow: 2 });
});
$('.popup').magnificPopup({ type: 'image' });
slice() 는 문자열의 일부를 추출하여 새로운 문자를 반환하는 메서드 MDN