이전에 자주쓰던 것은 bxslider이였다.스와이프가 되고 여러가지 이미지를 슬라이더 시킬 때 편리하고 많이 쓰기도 해서 프로젝트마다 대부분 사용을 하였다.
지금도 여전히 몇몇 프로젝트에는 쓰고 있을 정도로 손에 익고 또 다른걸 생각하는데 시간을 보내고 싶지 않아서 쓰고 있긴 하다.
그 밖에도 swiper.js도 꽤 마음에 들어서 쓰고 있는데 특히 나같은 경우는 상단에 몾바일에서 swipe가 되는 메뉴를 만들 때 자주 쓴다.
구조는 간단하다. 기본적으로 만든곳에서 알려주는 부분이기도 하고.
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="링크">메뉴</a>
</li>
</ul>
</div>
<script>
var sw = new Swiper('.swiper-container'), {
옵션값
});
</script>
css는 몇가지 배경이라던지 글자색이나 여백등을 조금만 조절해 주면 꽤나 괜찮게 나오는 편이다.
슬라이더 관련한 js는 이제 좋은것이 여러개 많이 있기 때문에 괜찮은 것을 사용을 어느것을 해도 무방하긴 하지만 나에게는 swiper가 맞는거 같다.
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1
셋팅은 되도 실제 스르륵 긁어보면 자바스크립트 에러가 위와 같이 날 경우가 있는데 나같은 경우는 swiper-container를 빼먹어서 그부분을 넣어줬더니 해결이 되었다.
스크립트 파일이나 만든곳은 아래와 같다.
메뉴얼이나 데모등이 자세하게 있기 때문에 min.js와 min.css만 넣고 위와같이 셋팅하면 크게 할 것이 없다.
뭐 물론 색이나 패딩등은 그때그때마다 맞춰줘야 하니 어차피 해야 할것이긴 하지만...