github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/슬라이드에%20맞게%20재생되는%20애니메이션%20바

codepen : https://codepen.io/ksoyy/pen/abYpMOG

animate 와 스와이프 옵션에 있는 transitionEnd 를 활용하여 만들었습니다.

function mainSlideAni(actEl) {
  actEl.find('.bar').animate({ width: '100%' }, 3000);
}

애니메이션 바에 animate 를 사용해서 스와이프 재생시간인 3000 동안 가로가 100% 되도록 설정했습니다.

애니메이션 바가 중복으로 생기는걸 방지하기 위해 슬라이드가 전환될때마다 애니메이션 바를 지우고 다시 만들었습니다.

DEMO

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.

github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/슬라이드%20index%20구하기

codepen : https://codepen.io/ksoyy/pen/XWEjqVj

swiper 슬라이드를 사용하게 될때 응용작업에서 가장 많이 사용하고 있는 슬라이드 인덱스 구하는 방법입니다!

그냥 index를 구할때 loop 옵션과 함께 사용할경우 정확한 index 구하기가 어렵습니다.

slideChange 이벤트를 사용해 슬라이드가 변경될때 정확한 index값을 구할수있습니다.

DEMO

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.

참고

https://swiperjs.com/swiper-api#prop-swiper-realIndex

github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/동일%20형식%20슬라이드가%20반복될때%20each문%20사용하기

codepen : https://codepen.io/ksoyy/pen/eYMdrdN

동일한 형태의 슬라이드가 반복될때 each문을 활용하는 방법입니다.

DEMO

See the Pen [Swiper] 동일 형식 슬라이드가 반복될때 each문 사용하기 by kim so yeon (@ksoyy) on CodePen.

github : 

codepen : https://codepen.io/ksoyy/pen/poLELqG

swiper 페이지 표시 관련글 입니다

기본형
모든 pager 버튼 클래스 : swiper-pagination-bullet
활성화 버튼 클래스 : swiper-pagination-bullet-active

숫자형
활성화 페이지 번호 클래스 : swiper-pagination-current
전체 페이지 번호 클래스 : swiper-pagination-total

위에 적힌 클래스 명으로 스타일 조절 가능합니다.
마지막 슬라이드처럼 가상선택자, 혹은 다른 태그를 이용해 번호 사이 단순 디자인적인 표시 혹은 슬라이즈 재생 시간과 같은 스타일도 가능합니다.

DEMO

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.

github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/swiper%20가로너비%20100%25%2C%20센터%20정렬

codepen : https://codepen.io/ksoyy/pen/gOeabWr

See the Pen swiper 가로너비 100%, 센터 정렬 by kim so yeon (@ksoyy) on CodePen.

가로 너비 100%, 활성화 슬라이드 센터 정렬입니다.

JS
가로로 보여줄 개수를 정하는 slidesPerView 옵션을 소수점으로 설정하면 예시와 같이 보여지게 됩니다.

GitHub : https://url.kr/5a4wfr
CodePen : https://codepen.io/ksoyy/pen/Yzayzvd

swiper를 활용해서 만든 탭메뉴 클릭시 슬라이드 index로 이동되는 슬라이드입니다. 
기본으로 제공되는 슬라이드중 Thumbs gallery 를 활용했습니다. 

CSS
이펙트 추가후 텍스트부분이 그대로 남아있어, 슬라이드 텍스트 부분에 활성화/비활성화 일때 opacity 수치를 조절해서 추가했습니다.

JS
v1에서 아쉬웠던 슬라이드시 썸네일 박스가 떠있는게 어색해서 슬라이드 될때 effect: 'fade' 옵션 추가했습니다

/* 자주쓰는옵션 */

/* 페이지 숫자로 표현 */
pagination: {
  el: '.swiper-pagination',
  type: "fraction",
},

/* 그룹배열 3행 2열 */
slidesPerView: 3,
slidesPerColumn: 2,

/* 세로정렬 */
direction: 'vertical',

/* 사이즈자유, 센터정렬 */
slidesPerView: 'auto',
centeredSlides: true,

/* 프로세스바 - 페이지대신 */
pagination: {
  el: '.progressbar',
  type: 'progressbar',
},

/* fade */
effect: "fade",

swiper 옵션인 thumbs gallery 를 사용해 아쉬운점 보완했습니다 (보러가기)

GitHub : https://url.kr/vro123

CodePen : https://codepen.io/ksoyy/pen/oNqNyLo

swiper를 활용해서 만든 탭메뉴 클릭시 슬라이드 index로 이동되는 슬라이드입니다. 

CSS
슬라이드 되는 item이 많아지면 탭메뉴에 들어갈 버튼도 늘어나기 때문에 탭메뉴 감싸는 부분에 overflow-x: auto; white-space: nowrap; 추가 했습니다. 

JS
단순 슬라이드기능과, 썸네일 클릭시 해당 슬라이드로 이동되는 기능만 존재하는 슬라이드입니다. 
swiper에서 slideChange 를 활용해 슬라이드의 index를 구했고, 탭메뉴에도 알맞는 index에 활성화 클래스 추가/삭제 넣었습니다. 
탭메뉴 버튼 클릭시 slideTo 를 활용해 버튼의 index와 슬라이드의 index가 일치하게 추가했습니다. 

아쉬운점
1. 슬라이드가 5개 이상일시 6번째 탭메뉴 버튼을 볼려면 수동으로 스크롤 해야함
2. 슬라이드가 오른쪽에서 왼쪽으로 슬라이드 될때 탭메뉴가 상단에 떠있어서 부자연스러운 느낌이 있음

codepen.io/ksoyy/pen/MWJEazL

오늘 알게 된 사실...!

scrollbar랑 loop랑 같이 사용 가능하지만 같이 사용하게 되었을 때 위치가 왼쪽으로 안붙는다

테스트 : codepen.io/ksoyy/pen/JjbvJKg

data-swiper-autoplay=""

속도 조절할 슬라이드에 해당 속성 추가

ex)

<div class="swiper-slide" data-swiper-autoplay="1000">
	<div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide" data-swiper-autoplay="1000"></div>
          <div class="swiper-slide"></div>
      </div>
</div>


var swiper = new Swiper('.swiper-container', {
	slidesPerView: 1,
	autoplay: {
            delay: 3000,
    		disableOnInteraction: false,
	}
});

data-swiper-autoplay 속성이 없는 슬라이드는 3초로 재생, 속성이 있는 슬라이드는 1초로 재생

swiperjs.com/swiper-api