카페24쇼핑몰 충돌없는 swipe 설치하기[인터넷쇼핑몰창업]

카페24쇼핑몰 충돌없는 swipe 설치하기[인터넷쇼핑몰창업]

 

 

<!--@css(/apps/css/swipe.min.css)--> 
<!--@js(/apps/js/swipe.min.js)-->
<!--@css(/apps/css/swipeProduct.css)-->
<!--@js(/apps/js/swipe.exec.js)-->

<div id="tabSwipeProduct" class="mySwipe">
    
    <!-- 탭영역 타이틀 -->
	<div class="title">CATEGORY</div>
		<!-- 탭영역 -->    
		<ul class="menu">
		<li class="selected">카테고리1</li>
		<li>카테고리2</li>
		<li>카테고리3</li>
		<li>카테고리4</li>
		<li>카테고리5</li>
		</ul>
    
		<!-- 탭 슬라이드 영역 -->    
	<div class="swiper-tab-container swiper-free-mode">
		<ul class="swiper-wrapper">
			<li class="swiper-slide"><!--탭슬라이드1-->
			</li>
            
			<li class="swiper-slide"><!--탭슬라이드2-->
			</li>

			<li class="swiper-slide"><!--탭슬라이드3-->
			</li>

			<li class="swiper-slide"><!--탭슬라이드4-->
			</li>
            
			<li class="swiper-slide"><!--탭슬라이드5-->
			</li>
		</ul>
	</div>
	<div class="swiper-pagination"></div><!--탭페이지노출-->
</div>

 

카페24 쇼핑몰에 내장되있는 jquery 와 충돌없이 swipe 설치해서 사용하기.

 

1. 첨부된 파일을 해당폴더에 복사한 후 위에 코드를 원하는 위치에 등록하면 된다.

 

2. 탭 슬라이드 영역에 원하는 상품모듈을 불러오면 각각 슬라이드 영역에 맞는 상품목록을 뿌릴수 있다. 

 

swipe.min.css

0.02MB

swipe.min.js

0.07MB

swipeProduct.css

0.00MB

swipe.exec.js

0.00MB

#카페24

#카페24쇼핑몰

#jquery

#swipe

#슬라이드넘기기

#카페24슬라이드

#javascript

#인터넷쇼핑몰창업