스와이퍼(Swiper) 예제

• 기본

  Swiper 1-1

  Swiper 1-2

  Swiper 1-3

• 1024px 미만에서 destroy

  Swiper 2-1

  Swiper 2-2

  Swiper 2-3

• 분기 별로 다른 옵션 적용

  Swiper 3-1
  768px 미만은 freemode
  768~1023px은 vertical
  1024px 이상은 horizontal + slidePerView 3

  Swiper 3-2
  768px 미만은 freemode
  768~1023px은 vertical
  1024px 이상은 horizontal + slidePerView 3

  Swiper 3-3
  768px 미만은 freemode
  768~1023px은 vertical
  1024px 이상은 horizontal + slidePerView 3

  Swiper 3-4
  768px 미만은 freemode
  768~1023px은 vertical
  1024px 이상은 horizontal + slidePerView 3

  Swiper 3-5
  768px 미만은 freemode
  768~1023px은 vertical
  1024px 이상은 horizontal + slidePerView 3

  Swiper 3-6
  768px 미만은 freemode
  768~1023px은 vertical
  1024px 이상은 horizontal + slidePerView 3

• add, remove, update slide

  Swiper 4-1

  Swiper 4-2

  Swiper 4-3

  Swiper 4-4

  Swiper 4-5

  Swiper 4-6
  add slide remove slide remove all slide

• 마지막, 처음 슬라이드에서 방향 변경

  Swiper 5-1

  Swiper 5-2

  Swiper 5-3

• 슬라이드 최대 너비 지정

  Swiper 6-1
  최대 너비 600px

  Swiper 6-2
  최대 너비 600px

  Swiper 6-3
  최대 너비 600px

• 센터 슬라이드 기준으로 주변 슬라이드에 class 추가

  Swiper 7-1
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-2
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-3
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-4
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-5
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-6
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-7
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-8
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-9
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

  Swiper 7-10
  활성화된 슬라이드 기준으로 앞, 뒤로 2개 배경색 #333

• 1024px 미만에서 가로 정렬 플로팅 배너

  Swiper 8-1

  Swiper 8-2

  Swiper 8-3

  Swiper 8-4

  Swiper 8-5
  배너 토글