swiper slider custom navigation

커스텀 메뉴를 사용한 swiper slider

 

See the Pen swiper custom navigation by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<div class="slider_wrap">
<div class="swiper_menu">
  <button onclick="goToPage(0);" class="active">슬라이드 1</button>
  <button onclick="goToPage(1);">슬라이드2</button>
  <button onclick="goToPage(2);">슬라이드3</button>
  <button onclick="goToPage(3);" >슬라이드4</button>
</div>
  
<div class="swiper_control">
  <button class="btn_prev">이전</button>
  <button class="btn_next">다음</button>
 </div>

<div class="swiper-container">
   <div class="swiper-wrapper">
     <div class="swiper-slide slide1">
       슬라이드1
     </div>
     <div class="swiper-slide slide2">
       슬라이드2
     </div>
      <div class="swiper-slide slide3">
        슬라이드3
     </div>
      <div class="swiper-slide slide4">
        슬라이드4
     </div>
    </div>
  </div>
</div>

 

css

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

.slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;}
.swiper-container{ overflow:hidden; height:300px;}
.swiper-slide{width:600px; height:300px; box-sizing:border-box; padding: 0 50px; display: flex !important; align-items: center;  font-family: 'pretendard';}
.swiper-slide.slide1 {background: rgb(239,146,128);}
.swiper-slide.slide2 {background: rgb(90,207,172);}
.swiper-slide.slide3 {background: rgb(113,179,232);}
.swiper-slide.slide4 {background: rgb(255,221,155);}

.swiper_control button{display: block; width: 38px; height: 38px; border: 0; font-size: 0; position: absolute; z-index: 99; top: 55%; cursor: pointer;}
.swiper_control .btn_prev{background: url(https://umings.github.io/images/btn_slide_prev.png) no-repeat center; left: -19px;}
.swiper_control .btn_next{background: url(https://umings.github.io/images/btn_slide_next.png) no-repeat center; right: -19px;}
.swiper_control button.swiper-button-disabled{opacity:0.5;}

.swiper_menu{ margin-bottom:10px;}
.swiper_menu button{display:inline-block; padding:5px 10px; line-height:1; font-family: 'pretendard'; border:0; border-radius:100px; background:none; cursor:pointer;}
.swiper_menu button.active{background:#000; color:#fff;}

 

javascipt *jqeury 필요

function goToPage(numberPage) {
    var ele = event.currentTarget;
    $(".swiper_menu  button").removeClass("active");
    ele.classList.add("active");
    Slier.slideTo(numberPage, 1000, false);
}
var Slier = new Swiper('.swiper-container', {
    navigation: {
    nextEl: '.btn_next',
    prevEl: '.btn_prev',
    },
    // loop: true,
    loopFillGroupWithBlank: false,
    observer: true,
    observeParents: true,
    speed: 1000
});
Slier.on('slideChange', function() {
    var indexNum = this.realIndex + 1;
    console.log(indexNum)
    $(".swiper_menu > button").removeClass("active")
    $(".swiper_menu > button:nth-child("+indexNum+")").addClass("active");
});