찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다오늘은 tab과 swiper슬라이드를 연결할 건데요.예전 jQuery때랑 코드 부분이 조금 달라져서 포스팅해 봅니다.  1. Tab과 슬라이더를 연결2. Tab클릭 시 슬라이더가 첫 시작위치로 로드 되어야 함3. Tab클릭시 슬라이더는 모두 loop처리되어야 함 이 세 가지 조건에 맞는 슬라이더를 구현해 보도록 합니다. Tab부분은 기본적인 리스트 형태로 마크업을 할 거고요.리스트 하나는 ALL버튼입니다.처음 로드 되었을 때와 ALL버튼을 누르면 전체 swiper-slide가 다 보이게 할 거예요. 아래는 html코드입니다. ALL EYE LIP BASE OTHERS  플러그인은 swiper를 이용하여 따로 ..

안녕하세요. 찐망고 입니다.swiper의 pagination은 여러 가지로 커스텀할 수 있는데요.오늘은 fraction타입으로 숫자에 "0"을 추가할 거예요. 물론 구글링 하면 많은데 이 포스팅은 최신버전!! 기준으로다...var swiper = new Swiper(".mySwiper", { pagination: { el: ".swiper-pagination", type: "fraction", },}); 기본적인 fraction은 현재 슬라이드 번호 / 전체 슬라이드 개수 형식으로 이루어진다.숫자 10 미만으로 01,02 이런 식으로 넘버링이 붙으려면 따로 작업을 해줘야 하는데  아래 코드를 확인해 보면 된다. var swiper = new Swiper(".mySwiper", { pagi..

안녕하세요 찐망고입니다.저번 포스팅엔 기본슬라이드에서 버튼을 눌렀을 때 fade효과가 나오는 슬라이드를 만들어 보았는데요 swiper effect) fade와 slide동시에 구현하기안녕하세요 찐망고입니다.오래간만에 swiper 관련 포스팅을 하네요.생각보다 고민을 많이 한 코드라 공유하고자 같이 포스팅해봅니다  클론 한 사이트는 노보셀바이오입니다.http://novocellbio.com/uiweb.tistory.com 무한슬라이드는 loop의 형태를 false에서 true로 변경해 주면 됩니다. 슬라이드가 loop형태로 바뀌면 슬라이드가 무한 반복되도록 복제된 슬라이드가 추가되어, 실제슬라이더의 인덱스 위치가 바뀌므로realIndex대신 activeIndex를 사용해야 합니다. 그렇다고 이전 코드에서 ..

안녕하세요 찐망고입니다.오래간만에 swiper 관련 포스팅을 하네요.생각보다 고민을 많이 한 코드라 공유하고자 같이 포스팅해봅니다  클론 한 사이트는 노보셀바이오입니다.http://novocellbio.com/ 노보셀바이오 novocellbio.com   탭을 누르면 fade효과가 적용되는 탭형태의 슬라이드입니다. 기존 웹사이트는 owl플러그인을 사용했는데요저는 그거 안 쓰고 싶으니까요.. 저분자 아미노산 탁월한 배양기술 고품질 세포치료제 ..

안녕하세요 찐망고 입니다.오늘은 두개의 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: { ..

안녕하세요 찐망고입니다.오늘은 swiper의 페이징을 두 개 연동하는 작업을 해 볼 건데요.  Expect better you-에스쁘아Expect better you. 독보적이고 생동감있는 프리미엄 메이크업 전문 브랜드, espoirwww.espoir.com swiper로 만들어진 에스쁘아 히어로섹션인데 엇 분명 페이징이 하나죠?보아하니 progressbar로 타입을 지정해 주면 끝날 것 같은데 왜...????라고 할 줄 알고 짠 보세요~?progressbar부분이 터치가 돼요.. 클릭이 됩니다. const visualSwiper = new Swiper(".swiper", { pagination: { el: ".swiper-pagination", clickable: true, }..

안녕하세요 찐망고 입니다. 오늘은 siwper를 이용하여 무한 롤링을 만들어 볼거에요. 이젠 다 swiper로 해결하려는 마음이에요. 구루미비즈 구루미와 함께 고화질 라이브 스트리밍을 시작하세요. biz.gooroomee.com 이미지들이 좌우로 무한 롤링되서 움직입니다. 예전엔 저런 애니메이션을 js로도 하고 css로도 어거지로 만들기도 했는데 swiper를 사용하면 아주 편합니다. 포스팅을 이제서야 하... 일단 이미지를 슬라이드 width값으로 지정하고 싶으면 swiper에서 freemode를 사용하는 것이 좋습니다. swiper는 slidesPerView에 지정된 숫자에 따라 자동으로 width값을 잡는데요. freemode를 사용하게 되면 사용자가 직접 css에서 width값과 여백을 지정해 줘..

안녕하세요 찐망고입니다. 오래간만에 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..

안녕하세요 찐망고입니다. 이전 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..

오늘은 swiper플러그인에 Centered를 사용해 볼건데요. 아래 쪽 결과물 처럼 보이게 하는거죠 swiper플러그인은 보면 슬라이드갯수를 정하면 그 갯수에 따라 화면에 보여지고 기본적으로 가장 왼쪽에 있는 슬라이드 클래스에 swiper-slide-active가 들어가는데요 그게 기준이 됩니다. center mode는 가운데 있는 slide에 swiper-slide-active가 들어갑니다. 그러다보니 가운데서 부터 시작을 해요~ 저렇게 왼쪽이 비어서 시작을 하죠.. loop없이 왼쪽으로 땡기려면 커스텀을 좀 해야하고 loop를 사용하면 자연스럽게 왼쪽이 채워질 거에요 끝으로 보여지는 slide들이 왼쪽에 채워지는 거죠. 하지만 실행시켜 보면 문제점이 발생하는데.. 슬라이드가 넘어가는 중에 저렇게 빈..