Swiper Interaction

스와이프를 구현하는 플러그인에는 여러가지가 있는데 내비게이터의 인터랙션과 컨텐츠의 인터랙션의 연동이 내 생각만큼 제대로 구현되는 플러그인이 없어서 2가지의 플러그인을 섞어야했다.

Swiper는 간단하면서도 효과적이다.

Swipegory는 살짝 복잡하지만서도 그만큼의 부드러운 인터랙션이 있다. 나름대로 코딩을 올려보지만 정리는 잘 되지 않는다...

#1 . 자바스크립트

var mySwiper = new Swiper('.content',{
        autoHeight:true,
        onSlideChangeStart:function(){
            var cur_slide_i = $('.content .swiper-slide-active').index();
            swipegoryUpdate(cur_slide_i); 
 
            function swipegoryUpdate(goTo) {
              var listItems = $('nav li');
              var panes = $('.panes');
              var prev = goTo - 1;
              var next = goTo + 1;  
              if(goTo >= 0 && goTo < listItems.length) {   
                listItems.removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
                $('li', panes).removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
 
                listItems.each(function(i) {
                  var li = $(this);
                  var pane = $('li:eq('+i+')', panes);
                  
                  
                  li.attr('style', '');
 
                  if(i == prev) {
                    li.addClass('prev');
                    li.css('margin-left', '0');      
                    pane.addClass('prev');
                  }
                  else if(i == next) {
                    li.addClass('next');
                    li.css('margin-left', '-' + li.outerWidth() + 'px');
                    pane.addClass('next');
                  }
                  else if(i < goTo) {
                    li.addClass('before');
                    li.css('margin-left', '-' + li.outerWidth() + 'px');
                    pane.addClass('before');
                  }
                  else if(i == goTo) {
                    li.addClass('cur');
                    var marginLeft = li.outerWidth() / 2;
                    
                    li.css('margin-left', '-' + marginLeft + 'px');
                    pane.addClass('cur');
 
 
                  }
                  else if(i > goTo) {
                    li.addClass('after');
                    li.css('margin-left', '0');
                    pane.addClass('after');
                  }
                });    
              }
            }
        }
    });
                
        
    
    $(document).ready(function(){
        
        // update on click
        $('nav ul li a').on('click', function(e){
          e.preventDefault();
          var goTo = $(this).parent().index();  
          swipegoryUpdate(goTo);
          mySwiper.slideTo(goTo);
        });    
 
        // update on load
        $(window).load(function() {
          swipegoryUpdate(0);  
        });
 
        function swipegoryUpdate(goTo) {
          var listItems = $('nav li');
          var panes = $('.panes');
          var prev = goTo - 1;
          var next = goTo + 1;  
          if(goTo >= 0 && goTo < listItems.length) {   
            listItems.removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
            $('li', panes).removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
 
            listItems.each(function(i) {
              var li = $(this);
              var pane = $('li:eq('+i+')', panes);
              
              
              li.attr('style', '');
 
              if(i == prev) {
                li.addClass('prev');
                li.css('margin-left', '0');      
                pane.addClass('prev');
              }
              else if(i == next) {
                li.addClass('next');
                li.css('margin-left', '-' + li.outerWidth() + 'px');
                pane.addClass('next');
              }
              else if(i < goTo) {
                li.addClass('before');
                li.css('margin-left', '-' + li.outerWidth() + 'px');
                pane.addClass('before');
              }
              else if(i == goTo) {
                li.addClass('cur');
                var marginLeft = li.outerWidth() / 2;
                
                li.css('margin-left', '-' + marginLeft + 'px');
                pane.addClass('cur');
              }
              else if(i > goTo) {
                li.addClass('after');
                li.css('margin-left', '0');
                pane.addClass('after');
              }
            });    
          }
        }

#2. HTML 

<nav>
    <ul>
        <li><a href="#item1">소개</a></li>
        <li><a href="#item2">시설</a></li>
        <li><a href="#item3">식단</a></li>
        <li><a href="#item4">서비스금액</a></li>
        <li><a href="#item5">프로그램</a></li>
        <li><a href="#item6">환불규정</a></li>
        <li><a href="#item7">가이드</a></li>
        <li><a href="#item8">스케쥴</a></li>
    </ul>
<nav>        
 
<section class="swiper-container content">
    <div class="swiper-wrapper">
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
    </div>
</section>
 

#3. CSS

nav{width:100%;height:50px;background-color: white;border-bottom:1px solid #ebd7ad;}
nav.swiper-container ul li.swiper-slide{
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}



#businessIntro {
  position: relative;
  width: 100%;
  background: #ebd7ad;
  overflow: hidden;
  transition: 1s height;
  transform: translate3d(0, 0, 0);
}
#businessIntro nav ul {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  border-bottom:1px solid #ebd7ad;
}
#businessIntro nav li {
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  transition: 0.5s all;
  transform: translate3d(0, 0, 0);
  line-height: 50px;
  height: 50px;
  font-size: 12px;
  width:80px;
  text-align:center;
}
#businessIntro nav li.prev {
  left: 0;
}
#businessIntro nav li.cur {
  left: 50%;
}
#businessIntro nav li.cur a {
  color: #38291f;
}
#businessIntro nav li.cur a:after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#businessIntro nav li.next {
  left: 100%;
}
#businessIntro nav li.before {
  left: 0;
}
#businessIntro nav li.after {
  left: 100%;
}
#businessIntro nav li a {
  position: relative;
  color: #999;
  text-decoration: none;
  height: 50px;
  line-height: 50px;
  display: block;
  overflow: hidden;
  transition: 0.5s color;
}
#businessIntro nav li a:after {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  background: #38291f;
  width: 100%;
  height: 4px;
  opacity: 0;
  transition: 0.5s all;
  transform: translate3d(0, 3px, 0);
}