# swiper
[Error Report] Swiper와 v-for 동시 적용 시, 배열의 첫 번째 요소만 출력되는 문제 (watch, computed 활용 로그 분석)
vuejs는 데이터 변경이 감지되면 자동으로 뷰를 다시 렌더링하여 변경 사항 반영함.<li> v-for 적용 시 변수에 할당된 배열의 요소중 첫번째 요소에만 할당되는 현상 확인swiper 라이브러리와 동시에 사용한 것이 문제일까? 확인 예정..데이터 변경과 화면에
JS Swiper 슬라이더 옵션 ✨
swiper 라는게 있네? 예전에 일일히 이미지 슬라이더를 만들던 나.............. 이 젠 안 녕 swiper를 사용하면 쉽게 슬라이드를 만들 수 있다! CDN 방식으로 사용할 수 있다. swiper를 보통 이미지 슬라이더로 많이 사용하던데, CSS로 예쁘게 만들면 화면 상단 탭(카테고리)로도 사용이 가능 하다는 점을 알았다~! 기본 구조는...
Swiper
슬라이드 기능을 쉽게 만들 수 있도록 한 스크립트사이트 : https://swiperjs.com/1) 링크 가져오기이 링크가 있어야 스와이퍼가 작동된다.2) 마크업mySwiper 이름은 내 마음대로 설정 가능,나머지 swiper, swiper-rapper, s
swiper loop 옵션 선택 시 마지막 페이지 부터 시작되는 현상
Swiper onInit 이 아닌 fetching 함수의 onComplete에서 swiper.slideTo(1) 를 사용한다
Swiper 이 녀석
react Swiper custom renderBullet
Swiper는 slide 또는 carousel 을 표현하는 UI 라이브러리이다https://www.npmjs.com/package/swiperreact에서 swiper로 custom pagination 버튼을 만들고 싶은 경우공식 문서 예제는 아래와 같이 st

Javascript - Swiper
Swiper는 슬라이드를 사용할 수 있게 해주는 자바스크립트 라이브러리이다. 웹사이트 대부분이 이 효과를 사용하여 슬라이드 기능을 넣어준다.

yarn berry 에서 swiper9.0 사용시 에러
yarn berry & pnp 설명https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-2-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%81%EC%9A%A9

AMORE MALL
📚 Overview 사이트명: 아모레몰 작업 기간: 7일 소요 라이브러리: swiper, jquery 유형: 모바일 적응형, 클론 코딩 특징: fetch 함수와 비동기 처리를 통해 호출한 데이터 사용 사이트 ✔️ What's the point? fetch() 함수로
jQuery - swiper 웹접근성 준수
출처 : https://pxd-fed-blog.web.app/a11y-swiper-slide/앞서 swiper option 정리하면서 a11y 의 사용법을 잘 모르겠어서 검색해서 찾은 내용나는 단순하게 이전/다음 슬라이드 정도의 내용을 넣는 정도만 생각했는데
jQuery - swiper option
direction: "vertical", // 슬라이드 방향slidesPerView: 3, // 한 화면에 보일 슬라이드 수slidesPerView: "auto", // 한 화면에 보일 슬라이드를 자동으로 계산spaceBetween: 30, // 슬라이드 사이 간격c

[Native] react-native-swiper
native에서 제공하는 swiper 기능이다.설치간단 사용예시!swiper 하고자 하는 목록을 swiper 태그로 감싼다.방향에 따라서 width, height 가 지정되어 있지 않으면 전체사이즈를 타겟 잡기 때문에swiper 할 목록의 사이즈를 지정해 주어야 동작한
Swiper 사용법
📋 Swiper swiper는 슬라이드 라이브러리로 다양한 메소드와 설정을 지원해서 사용하기 매우 편하다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 크로스 브라우징 측면에서도 뛰어나다. 1.Swiper 라이브러리 연결 제일 먼저 라이브러리를 사용하기 위해
Front-end 국비지원 #038일
반응형 페이지 제작 1-4 > 결과 >HTML >모바일 슬라이드 섹션부분은 'swiper'에서 가져왔다. 반응형페이지 이므로 모바일 사이즈로 줄어들면 보이는 슬라이드 영역이다. 기존의 슬라이드는 diplay: none; 이 된다. > CSS > Script
[React] 카드 슬라이더 만들기(1)
저번 주와 마찬가지로 javascript로 만들어진 카드 슬라이더를 리액트로 클론해보는 연습을 했다. 참고 https://wsss.tistory.com/1582Swiper API https://swiperjs.com/react우선 Swiper라는 라

마이리얼프로젝트(JSP)
해당 JSP 프로젝트는 Spring 프로젝트를 위해서 JSP를 숙지하기 위한 프로젝트이다. 해당 프로젝트는 가볍게 진행할 예정이다. 가볍게 진행하는 이유 : 요즘에는 JSP를 안쓴다고도 하고 제가 취업을 원하는 곳은 Spring boot로 취업을 원했기 때문이다. S

올리브영
🛠 올리브영 사이트명 : 올리브영 제작기간 : 22.10.19 ~ 22.10.21 (3일 소요) 사용언어 : html, css 라이브러리 : jQuery, swiper 분류 : 모바일형, 클론코딩 📌 Review!! 1. 스와이퍼 패럴럭스효과 및 텍스트효과 🔎

원티드
🛠 Wanted 사이트명 : 원티드 제작기간 : 22.10.26 ~ 22.10.27 (2일 소요) 사용언어 : html, css 라이브러리 : jQuery, swiper 분류 : 반응형 📌 Review!! 1. 미디어쿼리 적용하기 🔎 코드분석 반응형은 항상