탭슬라이드
- 예제
- HTML
- CSS
- JS
<!DOCTYPE html>.tabs {$('#content1.carousel').slick({ slidesToShow: 2 });
<!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>
.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;}
$('#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