탭이 4,5개 이상 넘어버릴 때 디자인을 하기가 참 난감한 상황이 간혹 생깁니다. 탭을 나열하는 디자인 방식이라더라도 웹에서는 자연스러워 보일 지 모르겠지만 모바일 상에서 볼 때는 화면을 너무 차지해 지저분해보일 수 있으니까요.
이럴 때 쓰면 좋을 플러그인이 바로 slick.js 플러그인과 swiper.js 플러그인을 쓰는 방식인데요. 두 플러그인 전부 실무에서 많이 쓰는 플러그인인 만큼 실용성이 좋습니다.
먼저 <head> 안에 아래 스크립트로 세팅해줍니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
그 다음, <style>과 <body>, <script>에 각각 소스를 넣어주세요.
<style>
.slick-initialized .swipe-tab-content {
position: relative;
min-height: 365px;
}
@media screen and (min-width: 767px) {
.slick-initialized .swipe-tab-content {
min-height: 500px;
}
}
.slick-initialized .swipe-tab {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: none;
border: 0;
color: #757575;
cursor: pointer;
text-align: center;
border-bottom: 2px solid rgba(0, 0, 0, 0);
transition: all 0.5s;
}
.slick-initialized .swipe-tab:hover {
color: #000;
}
.slick-initialized .swipe-tab.active-tab {
border-bottom-color: #000;
color: #000;
font-weight: bold;
}
.main-container {
padding: 25px;
background: #f1f1f1;
}
<body>
<div class="sub-header ">
<div class="swipe-tabs">
<div class="swipe-tab">One</div>
<div class="swipe-tab">Two</div>
<div class="swipe-tab">Three</div>
<div class="swipe-tab">Four</div>
<div class="swipe-tab">Five</div>
</div>
</div>
<div class="main-container">
<div class="swipe-tabs-container ">
<div class="swipe-tab-content">Tab 1</div>
<div class="swipe-tab-content">Tab 2</div>
<div class="swipe-tab-content">Tab 3</div>
<div class="swipe-tab-content">Tab 4</div>
<div class="swipe-tab-content">Tab 5</div>
</div>
</div>
<script>
$(function () {
'use strict';
var $swipeTabsContainer = $('.swipe-tabs'),
$swipeTabs = $('.swipe-tab'),
$swipeTabsContentContainer = $('.swipe-tabs-container'),
currentIndex = 0,
activeTabClassName = 'active-tab';
$swipeTabsContainer.on('init', function(event, slick) {
$swipeTabsContentContainer.removeClass('invisible');
$swipeTabsContainer.removeClass('invisible');
currentIndex = slick.getCurrent();
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
$swipeTabsContainer.slick({
//slidesToShow: 3.25,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
$swipeTabsContentContainer.slick({
asNavFor: $swipeTabsContainer,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
draggable: false,
touchThreshold: 10
});
$swipeTabs.on('click', function(event) {
// gets index of clicked tab
currentIndex = $(this).data('slick-index');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName);
$swipeTabsContainer.slick('slickGoTo', currentIndex);
$swipeTabsContentContainer.slick('slickGoTo', currentIndex);
});
//initializes slick navigation tabs swipe handler
$swipeTabsContentContainer.on('swipe', function(event, slick, direction) {
currentIndex = $(this).slick('slickCurrentSlide');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
});
이렇게 완성!
하면 좋겠지만 탭 자체가 좌우 화살표가 없어 조금 불편합니다.
화살표까지 넣어보도록 하겠습니다.
<body> .sub-header 안에 내용을 추가합니다.
<div class="arrowSlider">
<span class="prev" id="aro1_prev">◀</span>
<span class="next" id="aro1_next">▶</span>
</div>
swiper 슬라이더에 slick 탭이 있는 상황이기 때문에 slick 탭에 화살표를 넣어주어야 합니다. <script>에 적어둔 내용에 아래 내용으로 수정해주세요.
$swipeTabsContainer.slick({
//slidesToShow: 3.25, // 추가 수정된 내용!
slidesToShow: 8,
slidesToScroll: 1,
arrows: true, // 추가 수정된 내용!
prevArrow: $('#aro1_prev'), // 추가 수정된 내용!
nextArrow: $('#aro1_next'), // 추가 수정된 내용!
infinite: false,
swipeToSlide: true,
touchThreshold: 10,
responsive: [
{
breakpoint: 934,
settings: {
slidesToShow: 3,
}
}
]
});
마지막으로 <style>에 아래 내용을 넣어주면 완성입니다.
.arrowSlider {position:relative;}
#aro1_prev {position:absolute;left:0px;cursor:pointer;}
#aro1_next {position:absolute;right:0px;cursor:pointer;}
.slick-slider {margin:0 30px;}
이렇게 되면 화살표가 있는 형태로 완성됩니다.
반응형이기 때문에 모바일에서도 깔끔하게 보여집니다.
* 참고 : https://codepen.io/gbhasha/pen/gaggRR
