swiper demo : https://swiperjs.com/demos Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.comswiper 활용하기 두번째swiper를 이용해서 여러 종류의 슬라이드를 만들고네비게이션 버튼과 페이지네이션 버튼으로 제어를 했고자동으로 넘어가는 기능을 연습했고2025.05.18 - [Swiper] - swiper? 슬라이드 라이브러리 첫걸음 화면에 보이는 슬라이드 갯수 ( Slides per view ),cssMode,슬라이드 간격 ( Space between ),무한 슬라이드 (..

swiper를 이용해서 움직이는 슬라이드를 만드는게 가능해졌다.버튼을 만들어 클릭 기능을 만들고, 자동으로 넘어가는 기능, 다양한 이펙트 종류도 알게 되었다. 이번엔 새로운 기능과 함께화면에 보여지는 디자인에 관련된 속성을 공부해보려고 한다. 주로 화면에 하나의 슬라이드만 보이는 디자인이 많이 보이지만,여러 상품 리스트 같이 화면에 2개 이상의 요소를 보여줘야 할 때가 있다. 화면에 보여지는 슬라이드 갯수를 조절하는 속성 "slides per view" 이다 1. 화면에 보이는 슬라이드 갯수 조절 Slides per view의 core에 들어가코드를 가져온다. 속성값에 숫자를 입력하게 되면한 화면에 보이는 슬라이드 갯수를 조절 할 수 있다.기본은 1이고, 만약 swiper에서가 아닌 css 에서 크기 조..

웹을 만들다 보면 슬라이드는 거의 필수적으로 사용하는거 같다.많은 이미지나 정보를 사용자에게 보여주고 싶은데반복된 이동은 사용자에게 피로함을 줄 수 있기 때문에한 페이지에서 볼 수 있는 슬라이드가 효율적이고, 인터랙티브 효과로 보는 재미도 있다. 하지만... 슬라이드를 직접 코딩하기란 쉽지 않는 일이다.가로, 세로 슬라이드, 페이드 슬라이드 다양한 슬라이드를 만들 줄 알려면html 구조, css, script도 알맞게 사용할 줄 알아야 한다. jQuery를 사용한다면 순수 javaScript로 작업하는 것 보다는 쉽겠지만!라이브러리 swiper 를 활용한다면 더 빠르고 편하게 작업 할 수 있다!! javaScript, React, Vue, WebComponents 에서 사용할 수 있고 npm, cdn ..