lnb

http://puble.dev.website.ne.kr/company/greetings.php

html

<div class="lnb-wrap">
	<div class="lnb">
		<div class="swiper">
			<ul class="swiper-wrapper">
                <li class="swiper-slide <?=$sNum=="1"?"active":""?>"><a href="/company/greetings.php">CEO 인사말</a></li>
                <li class="swiper-slide <?=$sNum=="2"?"active":""?>"><a href="/company/history.php">회사연혁</a></li>
                <li class="swiper-slide <?=$sNum=="3"?"active":""?>"><a href="/company/organization.php">조직도</a></li>
                <li class="swiper-slide <?=$sNum=="4"?"active":""?>"><a href="/company/partner.php">협력기관</a></li>
                <li class="swiper-slide <?=$sNum=="5"?"active":""?>"><a href="/company/directions.php">찾아오시는 길</a></li>
			</ul>
		</div>
	</div>
</div>

css

.lnb-wrap { position:relative; border-bottom:1px solid #ddd; } 
.lnb { margin:0 auto; max-width:1200px; } 
.lnb ul { display:flex; justify-content: center; } 
.lnb ul li { text-align:center; width: auto; } 
.lnb ul li a { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width: auto; height:var(--lnb-height); color:#242424; font-size:var(--font-size-18); font-weight:600; line-height:1.666em; letter-spacing:0em; margin: 0 30px; } 
.lnb ul li a:after { content:""; position:absolute; bottom:-1px; left:50%; width:0; height:4px; background:var(--color-primary); transition:.2s; z-index:10; } 
.lnb ul li.active>a:after { width:100%; left:0; } 
.lnb ul li.active a { color:var(--color-primary); } 

script

  // lnb
    var lnbIndex = $(".lnb").find("li.active").index();
    var lnbSwiper = new Swiper('.lnb .swiper', {
        slidesPerView: 'auto',
        initialSlide: lnbIndex
    });