210322 카페24 모바일 슬라이더 swiperjs

카페24 작업하고 있다. 처음 해보는 건데 쭉쭉 잘 나간다 싶다가 모바일 슬라이더에서 막혔다.

메인 슬라이더에 swipe 가 되도록 추가하려고 하는데 계속 import 부터 에러가 났다. 원래 mobile jquery 쓰려면 추가로 mobile jquery 파일을 로드해야 하는데 카페24 에서 로드해둔 파일이랑 충돌이 되는 거 같다. 해결 해보려고 했는데 결국 포기하고 제작되어 있는 슬라이더를 사용하기로 했다. 그래서 고른 것이 swiperjs.com 

Swiper - The Most Modern Mobile Touch Slider

좋다. 기본적인 기능 다 되고 사용법도 어렵지 않다.

일단 css, js 파일을 각각 추가해 주고(압축 파일 다운 받아 내용 중 pakcage 폴더의 *.min.css, *.min.js 파일 업로드 및 스크립트에 로드),

나는 버튼이 있는 슬라이더를 만들었다. 참고한 예제 소스 링크는 : github.com/nolimits4web/Swiper/blob/master/demos/070-pagination-custom.html

nolimits4web/swiper

 

HTML

세 개의 class가 사용 되어야 slider 가 작동할 수 있다.

가장 바깥의 swiper-container,

그 안 쪽에 swiper-wrapper,

그리고 슬라이더 내용 부분 swiper-slide

일단 이 세 부분만 있으면 기본적으로 슬라이더 사용이 된다.

그리고 버튼을 사용하려면 swiper-container 의 바로 안에다가 swiper-pagination 클래스 이름을 가진 부분이 있어야 한다. 처음에 안 되서 보니 swiper-pagination 이 swiper-wrapper 안에 들어가 있었넴.

<div id='bd_wrap' class='swiper-container'>
	<div id='bd' class='swiper-wrapper'>
		<div class='bd_fr swiper-slide' id='a'>
			<img src='img/1.jpg'/>
		</div>
		<div class='bd_fr swiper-slide' id='b'>
			<img src='img/2.jpg'/>
		</div>
	</div>
    <div class="swiper-pagination"></div>
</div>

 

CSS:

기본 예제에서 긁어 온 버튼에 대한 css 를 나에게 필요한대로 수정한 것. 기본 예제는 그대로 출력하면 동그라미 버튼에 숫자가 나온다. 나는 숫자 없이 납작한 네모 버튼.

.swiper-pagination-bullet {
  width: 25px;
  height: 5px;
  line-height: 5px;
  border-radius:0;
  opacity: 1;
  background: #494949;
}
.swiper-pagination-bullet-active {
  background: #fff;
}

 

JS:

loop:true 를 추가하면 슬라이드가 옆으로 계속 넘어가며 반복 된다. 이게 없으면 슬라이더 개수만큼 작동하고 그 후에는 슬라이더가 작동하지 않는다.

pagination 부분이 슬라이더 버튼 부분. 

그리고 가장 위 두 줄은 css 관련 내용~

a = $('.bd_fr').children('img').height();
$('.swiper-pagination').css({'top':(a-20)+'px'});

new Swiper('.swiper-container', {
	loop: true,
  pagination: {
	el: '.swiper-pagination',
	clickable: true,
	renderBullet: function (index, className) {
	  return '<div class="' + className + '"></div>';
	},
  },
});

 

끝