{"id":863,"date":"2026-06-26T13:39:03","date_gmt":"2026-06-26T13:39:03","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=863"},"modified":"2026-06-26T13:39:03","modified_gmt":"2026-06-26T13:39:03","slug":"tabslide","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=863","title":{"rendered":"tabSlide"},"content":{"rendered":"

\uc608\uc81c<\/h4>\n

\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n

HTML<\/h4>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Carousel with Tabs and Lightbox<\/title>\n    <link rel="stylesheet" type="text\/css" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/slick-carousel\/1.8.1\/slick.min.css" \/>\n    <link rel="stylesheet" type="text\/css" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/magnific-popup.js\/1.1.0\/magnific-popup.min.css" \/>\n    <link rel="stylesheet" href="css.css" \/>\n  <\/head>\n\n  <body>\n    <div class="tabs">\n      <div class="tab-button-outer">\n        <div id="tab1" class="tab-button active">Tab 1<\/div>\n        <div id="tab2" class="tab-button">Tab 2<\/div>\n        <div id="tab3" class="tab-button">Tab 3<\/div>\n      <\/div>\n      <div id="content1" class="tab-content active carousel">\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/1.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/1.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/2.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/2.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/3.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/3.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/4.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/4.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/5.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/5.jpg" \/><\/div>\n      <\/div>\n      <div id="content2" class="tab-content carousel">\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/5.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/5.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/6.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/6.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/7.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/7.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/8.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/8.jpg" \/><\/div>\n      <\/div>\n      <div id="content3" class="tab-content carousel">\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/1.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/1.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/2.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/2.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/3.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/3.jpg" \/><\/div>\n        <div class="popup-outer"><a href="http:\/\/qwerew.cafe24.com\/images\/4.jpg" class="popup">\ud074\ub9ad<\/a><img src="http:\/\/qwerew.cafe24.com\/images\/4.jpg" \/><\/div>\n      <\/div>\n    <\/div>\n    <script src="https:\/\/code.jquery.com\/jquery-3.6.0.min.js"><\/script>\n    <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/slick-carousel\/1.8.1\/slick.min.js"><\/script>\n    <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/magnific-popup.js\/1.1.0\/jquery.magnific-popup.min.js"><\/script>\n    <script src="js.js"><\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
CSS<\/h4>\n
.tabs {\n  margin: 50px;\n}\n\n.tab-button-outer {\n  display: flex;\n  justify-content: center;\n}\n\n.tab-button {\n  background-color: #ccc;\n  padding: 10px 20px;\n  cursor: pointer;\n}\n\n.tab-button:hover {\n  background-color: #ddd;\n}\n\n.tab-button.active {\n  background-color: #bbb;\n}\n\n.tab-content {\n  display: none;\n}\n\n.tab-content.active {\n  display: block;\n}\n\n.carousel {\n  width: 300px;\n  margin: 50px auto;\n}\n\n.carousel img {\n  width: 100%;\n  margin: 0 auto;\n}\n.popup{position:absolute; display:block; background:white;}\n<\/code><\/pre>\n
JS<\/h4>\n
$('#content1.carousel').slick({ slidesToShow: 2 });\n\n$('.tab-button').on('click', function () {\n  const tabButtonId = $(this).attr('id');\n  $('.tab-button').removeClass('active');\n  $('.tab-content').removeClass('active');\n\n  $(this).addClass('active');\n  \/\/\ubcc0\uc218tabButtonId \uc758 \uac12\uc744 \uc774\uc6a9\ud558\uc5ec content1 \ub85c \ud3b8\uc9d1\n  const targetContent = $('#' + 'content' + tabButtonId.slice(-1));\n  targetContent.addClass('active');\n\n  if (targetContent.hasClass('slick-initialized')) {\n    targetContent.slick('unslick');\n  }\n  targetContent.slick({ slidesToShow: 2 });\n});\n\n$('.popup').magnificPopup({ type: 'image' });\n\n<\/code><\/pre>\n
\n
slice() \ub294 \ubb38\uc790\uc5f4\uc758 \uc77c\ubd80\ub97c \ucd94\ucd9c\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ubb38\uc790\ub97c \ubc18\ud658\ud558\ub294 \uba54\uc11c\ub4dc
\nMDN<\/a><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
\uc608\uc81c \ubbf8\ub9ac\ubcf4\uae30 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">\ud074\ub9ad<\/a><img … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-863","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=863"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/863\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}