17 탭슬라이드
- 예제
- HTML
- CSS
- JS
1<!DOCTYPE html>2<html>3 <head>4 <title>Carousel with Tabs and Lightbox</title>5 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />6 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />7 <link rel="stylesheet" href="css.css" />8 </head>9
10 <body>11 <div class="tabs">12 <div class="tab-button-outer">13 <div id="tab1" class="tab-button active">Tab 1</div>14 <div id="tab2" class="tab-button">Tab 2</div>15 <div id="tab3" class="tab-button">Tab 3</div>16 </div>17 <div id="content1" class="tab-content active carousel">18 <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>19 <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>20 <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>21 <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>22 <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>23 </div>24 <div id="content2" class="tab-content carousel">25 <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>26 <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>27 <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>28 <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>29 </div>30 <div id="content3" class="tab-content carousel">31 <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>32 <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>33 <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>34 <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>35 </div>36 </div>37 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>38 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>39 <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>40 <script src="js.js"></script>41 </body>42</html>1.tabs {2 margin: 50px;3}4
5.tab-button-outer {6 display: flex;7 justify-content: center;8}9
10.tab-button {11 background-color: #ccc;12 padding: 10px 20px;13 cursor: pointer;14}15
16.tab-button:hover {17 background-color: #ddd;18}19
20.tab-button.active {21 background-color: #bbb;22}23
24.tab-content {25 display: none;26}27
28.tab-content.active {29 display: block;30}31
32.carousel {33 width: 300px;34 margin: 50px auto;35}36
37.carousel img {38 width: 100%;39 margin: 0 auto;40}41.popup{position:absolute; display:block; background:white;}1$('#content1.carousel').slick({ slidesToShow: 2 });2
3$('.tab-button').on('click', function () {4 const tabButtonId = $(this).attr('id');5 $('.tab-button').removeClass('active');6 $('.tab-content').removeClass('active');7
8 $(this).addClass('active');9 //변수tabButtonId 의 값을 이용하여 content1 로 편집10 const targetContent = $('#' + 'content' + tabButtonId.slice(-1));11 targetContent.addClass('active');12
13 if (targetContent.hasClass('slick-initialized')) {14 targetContent.slick('unslick');15 }16 targetContent.slick({ slidesToShow: 2 });17});18
19$('.popup').magnificPopup({ type: 'image' });slice() 는 문자열의 일부를 추출하여 새로운 문자를 반환하는 메서드 MDN