# swiper

[성능최적화] swiper lazy loading
문제상황현재 메인 화면에서는 이미지가 swiper로 감싸져있어서, 한번 메인페이지에 진입할 때 화면에 노출되지 않은 이미지들도 한번에 호출된다. 그랬을 때, 이미지의 크기가 크기 때문에 이미지 호출이 느린 경우가 있어 페이지가 느려보인다. (참고: https:
스와이퍼 반응형 작동
768 미만일때 swiper 가 작동하고 이상이 되면 swiper 이벤트리스너를 파괴한다. flag로 사용하고 있는 multiBannerSlider가 같아야하는게 중요한 포인트였다...boolean값 true, false값을 가진 변수
[TypeScript + React]Swiper 라이브러리 사용법 ( + tailwind)
Swiper 라이브러리 홈페이지 : https://swiperjs.com/demos ✅ 설치하기 https://www.npmjs.com/package/swiper Swiper는 npm에서 패키지로 제공하기 때문에 아래 명령어로 설치 가능하다. > $
슬라이드(스와이프) 사용하기
팀프로젝트 메인을 꾸밀 때 사용한 슬라이드(스와이프)기능이다.하단 링크를 참조하여 구현하였다. 참조 사이트(스와이프 기능) : https://www.biew.co.kr/entry/%EB%B0%98%EC%9D%91%ED%98%95-%EC%8A%AC%EB%9D%B
[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) 를 사용한다
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