탭슬라이드

미리보기

<!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