# swiper

76개의 포스트
post-thumbnail

[성능최적화] swiper lazy loading

문제상황현재 메인 화면에서는 이미지가 swiper로 감싸져있어서, 한번 메인페이지에 진입할 때 화면에 노출되지 않은 이미지들도 한번에 호출된다. 그랬을 때, 이미지의 크기가 크기 때문에 이미지 호출이 느린 경우가 있어 페이지가 느려보인다. (참고: https:

2일 전
·
0개의 댓글
·

스와이퍼 반응형 작동

768 미만일때 swiper 가 작동하고 이상이 되면 swiper 이벤트리스너를 파괴한다. flag로 사용하고 있는 multiBannerSlider가 같아야하는게 중요한 포인트였다...boolean값 true, false값을 가진 변수

4일 전
·
0개의 댓글
·

[TypeScript + React]Swiper 라이브러리 사용법 ( + tailwind)

Swiper 라이브러리 홈페이지 : https://swiperjs.com/demos ✅ 설치하기 https://www.npmjs.com/package/swiper Swiper는 npm에서 패키지로 제공하기 때문에 아래 명령어로 설치 가능하다. > $

2023년 5월 20일
·
0개의 댓글
·
post-thumbnail

swiper 사용법

여기서 찾아보고 없으면 서치 ㄱㄱ

2023년 5월 7일
·
0개의 댓글
·

React에서 Swiper 사용하기

메인 배너용 Swiper, 여러개 Swiper

2023년 4월 5일
·
0개의 댓글
·

swiper 스와이퍼 만들기

좌우로 밀거나 버튼 눌렀을 때 움직이는 루프 스와이퍼 만들기

2023년 3월 27일
·
0개의 댓글
·

슬라이드(스와이프) 사용하기

팀프로젝트 메인을 꾸밀 때 사용한 슬라이드(스와이프)기능이다.하단 링크를 참조하여 구현하였다. 참조 사이트(스와이프 기능) : https://www.biew.co.kr/entry/%EB%B0%98%EC%9D%91%ED%98%95-%EC%8A%AC%EB%9D%B

2023년 3월 19일
·
0개의 댓글
·

[Error Report] Swiper와 v-for 동시 적용 시, 배열의 첫 번째 요소만 출력되는 문제 (watch, computed 활용 로그 분석)

vuejs는 데이터 변경이 감지되면 자동으로 뷰를 다시 렌더링하여 변경 사항 반영함.<li> v-for 적용 시 변수에 할당된 배열의 요소중 첫번째 요소에만 할당되는 현상 확인swiper 라이브러리와 동시에 사용한 것이 문제일까? 확인 예정..데이터 변경과 화면에

2023년 3월 18일
·
0개의 댓글
·

JS Swiper 슬라이더 옵션 ✨

swiper 라는게 있네? 예전에 일일히 이미지 슬라이더를 만들던 나.............. 이 젠 안 녕 swiper를 사용하면 쉽게 슬라이드를 만들 수 있다! CDN 방식으로 사용할 수 있다. swiper를 보통 이미지 슬라이더로 많이 사용하던데, CSS로 예쁘게 만들면 화면 상단 탭(카테고리)로도 사용이 가능 하다는 점을 알았다~! 기본 구조는...

2023년 3월 9일
·
0개의 댓글
·
post-thumbnail

swiper 여러가지

https://open-code.tech/en/post-728/

2023년 2월 27일
·
0개의 댓글
·

Swiper

슬라이드 기능을 쉽게 만들 수 있도록 한 스크립트사이트 : https://swiperjs.com/1) 링크 가져오기이 링크가 있어야 스와이퍼가 작동된다.2) 마크업mySwiper 이름은 내 마음대로 설정 가능,나머지 swiper, swiper-rapper, s

2023년 2월 27일
·
0개의 댓글
·

swiper loop 옵션 선택 시 마지막 페이지 부터 시작되는 현상

Swiper onInit 이 아닌 fetching 함수의 onComplete에서 swiper.slideTo(1) 를 사용한다

2023년 2월 20일
·
0개의 댓글
·

Swiper 이 녀석

Swiper에 대해서 알아보자~ 어디까지 알아볼 수 있나~

2023년 2월 17일
·
0개의 댓글
·

react Swiper custom renderBullet

Swiper는 slide 또는 carousel 을 표현하는 UI 라이브러리이다https://www.npmjs.com/package/swiperreact에서 swiper로 custom pagination 버튼을 만들고 싶은 경우공식 문서 예제는 아래와 같이 st

2023년 2월 16일
·
0개의 댓글
·
post-thumbnail

Javascript - Swiper

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

2023년 2월 9일
·
0개의 댓글
·
post-thumbnail

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

2023년 2월 5일
·
0개의 댓글
·
post-thumbnail

AMORE MALL

📚 Overview 사이트명: 아모레몰 작업 기간: 7일 소요 라이브러리: swiper, jquery 유형: 모바일 적응형, 클론 코딩 특징: fetch 함수와 비동기 처리를 통해 호출한 데이터 사용 사이트 ✔️ What's the point? fetch() 함수로

2023년 1월 18일
·
0개의 댓글
·

jQuery - swiper 웹접근성 준수

출처 : https://pxd-fed-blog.web.app/a11y-swiper-slide/앞서 swiper option 정리하면서 a11y 의 사용법을 잘 모르겠어서 검색해서 찾은 내용나는 단순하게 이전/다음 슬라이드 정도의 내용을 넣는 정도만 생각했는데

2023년 1월 11일
·
0개의 댓글
·

jQuery - swiper option

direction: "vertical", // 슬라이드 방향slidesPerView: 3, // 한 화면에 보일 슬라이드 수slidesPerView: "auto", // 한 화면에 보일 슬라이드를 자동으로 계산spaceBetween: 30, // 슬라이드 사이 간격c

2023년 1월 10일
·
0개의 댓글
·

jQuery - swiper menu

!codepenpowerwmj/embed/dyjvWZK?default-tab=html%2Cresult

2023년 1월 10일
·
0개의 댓글
·