![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/kJDqx/btsHLVi7Zrx/KE24YtpkMA14g78M772oUk/img.png)
안녕하세요 찐망고 입니다.오늘은 두개의 swiper를 이용하여 탭을 만들어볼건데요. 참고 사이트는 구루미비즈입니다. AI 화상 솔루션 구루미비즈AI화상상담솔루션, AI교육, AI서비스 구축을 위한 최적의 AI화상플랫폼biz.gooroomee.com 먼저, 각각의 Swiper 코드부터 살펴볼까요?const swiper01 = new Swiper(".s01-swiper", { slidesPerView: 1.3, spaceBetween: 20, pagination: { el: ".s01-swiper .swiper-pagination", type: "progressbar", }, breakpoints: { 1281: { ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Rnlbp/btsFMZM1aE5/A6vq2r5akLUlPdSEEqPLhK/img.png)
안녕하세요 찐망고입니다. 오늘은 swiper의 페이징을 두 개 연동하는 작업을 해 볼 건데요. Expect better you-에스쁘아 Expect better you. 독보적이고 생동감있는 프리미엄 메이크업 전문 브랜드, espoir www.espoir.com swiper로 만들어진 에스쁘아 메인비주얼인데 엇 분명 페이징이 하나죠? 보아하니 progressbar로 타입을 지정해 주면 끝날 것 같은데 왜...???? 라고 할 줄 알고 짠 보세요~? progressbar부분이 터치가 돼요.. 클릭이 됩니다. const visualSwiper = new Swiper(".swiper", { pagination: { el: ".swiper-pagination", clickable: true, }, }) swip..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ciC4gw/btsFpRayB9e/HbMAJ0nNg2rQEX5FeFASM0/img.png)
안녕하세요 찐망고 입니다. 오늘은 siwper를 이용하여 무한 롤링을 만들어 볼거에요. 이젠 다 swiper로 해결하려는 마음이에요. 구루미비즈 구루미와 함께 고화질 라이브 스트리밍을 시작하세요. biz.gooroomee.com 이미지들이 좌우로 무한 롤링되서 움직입니다. 예전엔 저런 애니메이션을 js로도 하고 css로도 어거지로 만들기도 했는데 swiper를 사용하면 아주 편합니다. 포스팅을 이제서야 하... 일단 이미지를 슬라이드 width값으로 지정하고 싶으면 swiper에서 freemode를 사용하는 것이 좋습니다. swiper는 slidesPerView에 지정된 숫자에 따라 자동으로 width값을 잡는데요. freemode를 사용하게 되면 사용자가 직접 css에서 width값과 여백을 지정해 줘..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bFoIkn/btszVuLSuID/AMgZmZc5nGID4ilA6bouD0/img.png)
안녕하세요 찐망고입니다. 오래간만에 swiper관련 포스팅을 하네요. 오늘은 pagination의 블릿 모양 대신 텍스트로 나오게 작업을 해볼까 합니다. 마녀공장을 클론코딩한 학생의 swiper슬라이더인데요. 텍스트를 클릭해서 화면을 넘기고 싶은 거죠 ㅎㅎ 여러 방법이 있으나 저는 배열을 이용해서 작업했습니다. const bullet = ['마녀공장', 'GS25']; const swiper01 = new Swiper ('.work-slider, { loop: true, pagination: { el: '.work-slider .swiper-pagination', clickable: true, renderBullet: function (index, className) { return '' + (bulle..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bzx6UF/btsl1VYPff8/L632vJRsHKkWjmWbdOimx0/img.png)
안녕하세요 찐망고입니다. 이전 swiper포스팅에서 pagination의 type을 progressbar로 만들어서 로딩바를 만들어봤는데요 2022.06.08 - [플러그인/swiper] - swiper 슬라이더 연결하기 swiper 슬라이더 연결하기 안녕하세요 찐망고입니다. 오랜만...이라는 글을 언제쯤 안쓸 수 있을까요? 중요한건 제 모든 포스팅이 예약 포스팅이라는 겁니다..🤣 오늘은 swiper슬라이더에 관련된 포스팅을 하려고 합니다. uiweb.tistory.com swiper autoplay-progress https://codesandbox.io/p/sandbox/5d6tdn?file=%2Findex.html%3A1%2C1 swiper-autoplay-progress CodeSandbox is..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/6c1v6/btsjGxqZbkZ/2H1KoBHl7PDEY4ma8bWroK/img.png)
오늘은 swiper플러그인에 Centered를 사용해 볼건데요. 아래 쪽 결과물 처럼 보이게 하는거죠 swiper플러그인은 보면 슬라이드갯수를 정하면 그 갯수에 따라 화면에 보여지고 기본적으로 가장 왼쪽에 있는 슬라이드 클래스에 swiper-slide-active가 들어가는데요 그게 기준이 됩니다. center mode는 가운데 있는 slide에 swiper-slide-active가 들어갑니다. 그러다보니 가운데서 부터 시작을 해요~ 저렇게 왼쪽이 비어서 시작을 하죠.. loop없이 왼쪽으로 땡기려면 커스텀을 좀 해야하고 loop를 사용하면 자연스럽게 왼쪽이 채워질 거에요 끝으로 보여지는 slide들이 왼쪽에 채워지는 거죠. 하지만 실행시켜 보면 문제점이 발생하는데.. 슬라이드가 넘어가는 중에 저렇게 빈..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b7ozwu/btsjdl0sPQK/dKay4WmNqYPy4A7ebeRkUK/img.png)
안녕하세요 찐망고입니다. 거두절미하구 포스팅 시작! https://www.imele.co.kr/ 아이멜리 건강하고 아름다운 삶을 위한 라이프 케어, 아이멜리 www.imele.co.kr 학생이 여기 있는 Best Product섹션의 슬라이드를 따라하고 싶어해서 만들어보았습니다. 아 저 사이트는 slick을 사용하였는데 이번반 slick적용하는 수업을 안했음.. 그래서 swiper로 만들어 볼게요~ 일단 두개의 swiper를 만들어서 swiper.controller.control를 이용해서 연결해보려고 했는데.. 실패했습니다. 계속 충돌해서 swiper-slide-active가 움직이지 않고 고정되는 바람에.. 🤣🤣 그래서 사용한 방법 // HTML 피부에 전하는 청귤 세럼의 빛 2주 잡티 이별 세럼 청귤..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/F38S9/btsiJ7s5Mbn/5jEg4U29yK2sPhe3pKA2Z1/img.png)
이번 반 예제 클론 코딩은 https://www.century21cc.co.kr/ 였는데... 개인적으로 사이트 내 단점을 수정하면서 예제로 쓰고있다. 반응형 예제로 쓰기엔 나쁜 레이아웃이지만 뭐 마크업이 불가능한 레이아웃은 아니므로... 저 섹션 부분 왼쪽 그림이 swiper를 이용해서 fade처리되면서 세번 넘어가게 작업 되어 있길래 따라해 보았습니다. 참고 swiper demo link swiper-effect-creative CodeSandbox is an online editor tailored for web applications. codesandbox.io // HTML // CSS .food-sec .img-slider { float: left; max-width: 60%; padding-..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cpaFE9/btrD3zj4MEo/E3pWzP1CQXBVBVhxZ1RjGK/img.png)
안녕하세요 찐망고입니다. 오랜만...이라는 글을 언제쯤 안 쓸 수 있을까요? 중요한 건 제 모든 포스팅이 예약 포스팅이라는 겁니다..🤣 오늘은 swiper슬라이더에 관련된 포스팅을 하려고 합니다. 제가 수업예제를 할 때 dbcut이나 gdweb에 올라온 사이트들을 참고하는데요. 늘 업데이트되어있는 사이트를 보고 기본적인 기초 수업이 끝난 후에 반응형 사이트 하나 적응형 사이트 하나를 예제로 같이 만들어봐요. 예제는 일 년에 한 번씩 바꾸는 것 같고요.. 일 년이 넘어가면 유행이 지난 느낌이랄까 ㅎㅎ 하루하루 업데이트된 사이트를 보다 보면 그때그때 유행하는 스타일이나 효과등을 확인할 수 있는데요. 포스팅 주제가 swiper다 보니 슬라이더 위주를 보자면 arrow버튼은 필수고 pagination에 스크롤과..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bYIIhi/btrbAA3Ngyk/nmJ7uHegVUr1K77UTKM150/img.png)
안녕하세요 찐망고입니다. slick slider 세 번째 포스팅이네요.. 오늘은 slick API 중 customPaging 이용하여 dots의 모양을 numbering모양으로 변경해 보겠습니다. 더보기 제가 요즘 insta도 시작하고 youtube준비도 해야 하고 수업도 하고 있어서 매일매일 포스팅이 너무 힘듭니다. 어휴 제가 원래 계획 없이 무리해서 일을 저지르는 스타일이라.. 그래도 좋은 내용으로 포스팅하게 노력해보겠습니다 수업 중에는 이렇게 슬라이더를 일일이 하나씩 예제 삼아 하진 않고요. 선생님 이 슬라이드가 만들고 싶습니다!라고 하면 그냥 똑같이 만듭니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 자 코드 펜을 가봐야죠? https://codepen.io/jjinMangKo/pen/LYygOrq 오늘은 slick-sl..
- Total
- Today
- Yesterday
- JavaScriptTips
- UI디자인
- 슬라이드플러그인
- boxmodel
- 반응형웹
- 웹디자인
- 웹접근성
- Border
- 포토샵합성
- uxdesign
- 자바스크립트숫자카운트
- css
- 크로스브라우징
- 스마트폰해상도
- uiux
- 코딩교육
- css그리드
- JavaScript
- CSS3
- Slick
- 프로그래밍기초
- 피그마플러그인
- 웹표준
- css4
- slickAPI
- 시멘틱마크업
- padding
- uidesign
- 디자인팁
- margin
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |