[js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 swiper.js 를 이용하여 사이트에 슬라이드를 적용합니다. 보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다. 홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로 사이트의 첫인상을 좌우하는 가장 중요한 부분입니다. 이 슬라이드는 스와이퍼라는 자바스크립트 라이브러리 사용을 추천합니다. 스와이프 이동, 버튼 이동, 화살표 이동, 자동 플레이, 루프, 반응형의 기능을 캐러셀 슬라이드에 적용이 모두 가능한 라이브러리입니다. swiper.js 사이트 구글에서 swiper js를 검색하여 사이트로 이동합니다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most mode.. [js/jQuery] 반응형 캐러셀(carousel) 슬라이드 구현하기 반응형 캐러셀 슬라이드를 구현합니다. swiper, slick slide, owl slide와 같은 자바스크립트 라이브러리를 사용하면 매우 편하지만, 자바스크립트와 제이쿼리를 이용하여 슬라이드를 직접 구현 합니다. 슬라이드 작동 조건: 1. 반응형 슬라이드: 창 크기에 맞추어 슬라이드의 이미지 사이즈 자동 조정 2. 자동 플레이 슬라이드: 일정 시간마다 슬라이드 좌에서 우로 이동 3. 슬라이드 변경 시, 아래 페이지 버튼 색깔 변동 4. 페이지 버튼 클릭마다 각 해당 슬라이드로 바로 이동 이제 시작해 볼까요! 아래의 이미지 파일을 만들어 사용하였습니다. 슬라이드의 배열과 동작 순서는 아래와 같습니다. 캐러셀 슬라이드(carousel slide) 예제 html css * {margin: 0;padding:.. 이전 1 다음 반응형
