개발자의 끄적끄적

[javascript/jquery] jquery swiper library cdn url 참고 사이트 [링크] jquery 슬라이드 화면을 구성하다보면 jquery swiper 라이브러리를 많이 사용합니다! 그중 swiper 라이브러리를 로드할 수 있는 cdn 주소를 찾아야 되는 경우가 있어서 공유하려고 합니다! 아래 링크 들어가셔서 필요한 url 을 찾아서 로드 하시면 됩니다! 참고들 하세요! jquery swiper library cdn : https://cdnjs.com/libraries/Swiper Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most moder..

[javascript/jquery] jquery swiper afterInit event example / jquery swiper 로드 완료 시점 체크 방법 jquery swiper 를 사용하다보면 swiper 가 정상적으로 로드가 되었는지 확인해서 로드된 후에 특정 액션을 취해야 하는 경우가 종종 있습니다. 그럴때는 아래와 같이 afterInit 이벤트를 등록하시면 됩니다. var swiper = new Swiper(".slider", { on: { afterInit: function(){ // to do }, }, }); afterInit 함수 안에 원하는 액션을 구현하시면 swiper 가 정상로드된 후에 해당 액션이 동작하게 됩니다! 참고들 하세요!

[javascript/jquery] jquery swiper reach last slide example / jquery swiper 마지막 슬라이드 도달여부 확인하는 방법 jquery swiper 를 이용해서 slide를 구현하다 보면 마지막 슬라이드에 도달했는지를 확인해야 하는 경우가 있습니다. 내용을 다 확인했는지 혹은 다시 처음슬라이드로 돌아갈지 등 여러가지 상황을 체크해야하는 경우가 많은데요 그럴때는 아래 나와있는 내용처럼 reachEnd 이벤트를 사용하시면 됩니다. const swiper = new Swiper('.swiper', { // ... }); swiper.on('reachEnd', function () { // to do }); 위 내용 보시면 아시겠지만, reachEnd 이벤트를 ..

[javascript/jquery] jquery swiper slide change example / jquery swiper 슬라이드 변경 이벤트 감지 방법 jquery 에서 슬라이드를 표현하고 싶을때 swiper 를 많이 사용합니다! 그중에서 슬라이드가 변화되었을때를 체크해서 무언가를 띄운다거나 해야 하는 경우가 있습니다. 그럴때는 아래 나와있는 내용처럼 slideChange 이벤트를 사용하시면 됩니다! var mySwiper = new Swiper('.swiper-container', { }; mySwiper.on('slideChange', function () { // todo }); 참고들 하세요!

[javascript & jquery] swipre.js 반복 option 개발을 하던중 swiper.js 를 많이 사용하실껍니다! 그중 당연히 마지막슬라이드에 가서 다음을 누르면 처음 슬라이드로 가고 싶은데 기본적으로는 안되죠! 당연히 옵션에 아래 값을 추가해야 동작합니다. loop:true 이렇게 하면 마지막 슬라이드에서 처음슬라이드로 이동은 하지만 화면상으로는 다음슬라이드가 없는거 처럼 보이다가 누르면 막상 첫슬라이드로 이동합니다. 즉, 부자연스럽죠! 이때 추가하는 옵션! loopAdditionalSlides: 1 위 옵션을 추가하면 슬라이드가 끊기지않고 뒤에도 계속 있는거처럼 자연스럽게 반복됩니다! 참고하세요!!