부트스트랩 | 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기

키워드 : 부트스트랩,swiper.min.js,스와이퍼

무료아이콘 전체게시물 작성일18-01-17 03:18 조회2,496회

본문


부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 

 

이 놈 찾을라고 얼마나 - -;; 구글링을 했는지 ㅠㅠ

며 칠 걸렸는데 완벽하진 않지만 얼추 흉내만 -0 -;;

 

1cf6b2921c09fb3a4bfe6828d531ed92_1516125
 

 

찾아낸 소스로 구현한 소스 미리보기

swiper로 만든 네이버 터치 스크롤링 메뉴 

 

1cf6b2921c09fb3a4bfe6828d531ed92_1516125
 


상단 스와이퍼 css추가

<link rel="stylesheet" href="css/swiper.min.css"> 


css

.swiper-container {

margin:0 auto;

position:relative;

overflow:hidden;

z-index:1;

max-width:1140px;

border-left:1px solid #efefef;

}

.swiper-slide {

background-position:center;

background-size:cover;

border-right:1px solid #efefef;

}

.swiper-container ul, li {list-style-type:none;margin:0;padding:0;}

.swiper-container .tabs > li { width: 25%; }

.swiper-container .tabs > li > a, .swiper_block{ color: #4B4C50; padding:20px 0; display: block; background: #fff; text-align: center; text-decoration: none; font-size: 14px; font-weight:bold; height:45px; line-height: 0px; border-bottom: 1px solid #ddd; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

.swiper-container .tabs .active a{ color: #ff0000; background-color:#efefef;}



html

부트스트랩 <nav>이 사이에 메뉴를 적용했네요 전</nav>

 

<div id="container-fluid">

 <div class="swiper_block hidden-sm hidden-xs">zzzzzzzzzzzzzzzzzz</div>

   <div class="swiper-container visible-sm visible-xs">

     <ul class="swiper-wrapper tabs">

       <li class="swiper-slide"><a href="#">삽니다/팝니다</a></li>

       <li class="swiper-slide"><a href="#">맛집/배달</a></li>

       <li class="swiper-slide"><a href="#">교육/문화</a></li>

       <li class="swiper-slide"><a href="#">편의시설</a></li>

       <li class="swiper-slide"><a href="#">행사/이벤트</a></li>

       <li class="swiper-slide"><a href="#">구인/구직</a></li>

       <li class="swiper-slide"><a href="#">내 가게 홍보</a></li>

      </ul>

   </div>

</div>

 

 

html 맨 하단에 </body> 전에 추가

<script src="js/swiper.min.js"></script>

<script src="js/swiper.js"></script>

 

 

 

css 파일 주소

http://idangero.us/swiper/dist/css/swiper.min.css 

 

swiper.min.js 파일 주소 

http://idangero.us/swiper/dist/js/swiper.min.js 

 

swiper.js는 동일한 이름으로 만든 뒤 

아래와 같이 만들어 저장하시면 돼요

 

var swiper_1 = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

slidesPerView: 4, //한 번에 보여질 갯 수

paginationClickable: true,

spaceBetween: 0,

freeMode: true,

pagination: false,

mousewheelControl: true, // 마우스 휠로 슬라이드 움직임

nextButton: '.swiper-button-next', //다음페이지 이동

prevButton: '.swiper-button-prev' //이전페이지 이동

});

$('.tabs > li > a').on('click', function(e){

$(this).parent().addClass('active').siblings().removeClass('active');

var tabIdx = $(this).parent().index();

});


 

그외 스와이퍼로 구현 가능한 다양한 기능 미리보기

http://idangero.us/swiper/demos/  

 

 

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 15 비추천 0

Css + Html

112개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 22 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 44 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 21 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 16 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 51 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 54 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 95 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 56 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 43 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 114 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1294 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1454 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 907 추천: 14
열람 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 2497 추천: 15
98 부트스트랩 부트스트랩 특정 해상도에서만 보이게 하거나 숨기기 무료아이콘 전체게시물 01-10 1738 추천: 17
게시물 검색