Slider

Slider - swiper.js

웹사이트나 앱에서 사용자에게 이미지, 동영상, 텍스트 등의 콘텐츠를 순차적으로 보여주는 UI 요소입니다.
대표적인 슬라이더인 오픈소스 JavaScript 라이브러리로 Swiper.js가 있습니다.

Getting Started

Use swiper from CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
소스 코드가 복사되었습니다.
Download assets

<link rel="stylesheet" href="../resources/css/swiper.min.css"> <script src="../resources/js/swiper.min.js"></script>
소스 코드가 복사되었습니다.

Navigation

default

Slide1

Slide2

Slide3

Slide4

<div id="swiper1" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script> const mySwiper1 = new Swiper('#swiper1', { //... navigation: { // ★ 내비게이션 있을 때 nextEl: '#swiper1 .swiper-button-next', prevEl: '#swiper1 .swiper-button-prev', }, }); </script>
소스 코드가 복사되었습니다.
White circle

Slide1

Slide2

Slide3

Slide4

<div id="swiper2" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-button-prev bg_white"></div> <div class="swiper-button-next bg_white"></div> </div> <script> const mySwiper2 = new Swiper('#swiper2', { //... navigation: { // ★ 내비게이션 있을 때 nextEl: '#swiper2 .swiper-button-next', prevEl: '#swiper2 .swiper-button-prev', }, }); </script>
소스 코드가 복사되었습니다.

Pagination

Default

Slide1

Slide2

Slide3

Slide4

<div id="swiper3" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-pagination"></div> </div> <script> const mySwiper3 = new Swiper('#swiper3', { //... pagination: { // ★ 페이지네이션 있을 때 el: '#swiper3 .swiper-pagination', // ★ 기본은 bullets 유형 }, }); </script>
소스 코드가 복사되었습니다.
Fraction - 페이징 숫자 출력

Slide1

Slide2

Slide3

Slide4

<div id="swiper4" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-pagination"></div> </div> <script> const mySwiper4 = new Swiper('#swiper4', { //... pagination: {// ★ 페이지네이션 있을 때 el: "#swiper4 .swiper-pagination", type: "fraction", // ★ 페이징 유형 'progressbar' | 'bullets' | 'fraction' | 'custom' }, }); </script>
소스 코드가 복사되었습니다.

scrollbar

Default

Slide1

Slide2

Slide3

Slide4

<div id="swiper5" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-scrollbar"></div> </div> <script> const mySwiper5 = new Swiper('#swiper5', { //... scrollbar: { // ★ 스크롤바 있을 때 el: '#swiper5 .swiper-scrollbar', draggable: true // ★ 스크롤바 드래그가능 여부 }, }); </script>
소스 코드가 복사되었습니다.

Type

Default

<div id="swiper6" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> <script> const mySwiper6 = new Swiper('#swiper6', { direction: 'horizontal', // 슬라이드 방향 initialSlide: 0, // 시작되는 슬라이드 인덱스 slidesPerView: 1, // 보여지는 슬라이드 갯수 spaceBetween: 0, // 슬라이드 간격 autoplay: false, // 자동 재생 loop: false, // 무한 루프 effect:'slide', // 슬라이드 애니메이션 효과 speed: 300, // 슬라이드 애니메이션 속도 pagination: { // 페이지네이션 있을 때 el: '.swiper-pagination', type: 'bullets' }, navigation: { // 내비게이션 있을 때 nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { // 스크롤바 있을 때 el: '.swiper-scrollbar', draggable: true } }); </script>
소스 코드가 복사되었습니다.
vertical

<div id="swiper7" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> <script> const mySwiper7 = new Swiper('#swiper7', { direction: 'vertical', // ★ 슬라이드 방향 initialSlide: 0, // 시작되는 슬라이드 인덱스 slidesPerView: 1, // 보여지는 슬라이드 갯수 spaceBetween: 0, // 슬라이드 간격 autoplay:'false', // 자동 재생 loop:'false', // 무한 루프 effect:'slide', // 슬라이드 애니메이션 효과 speed: 300, // 슬라이드 애니메이션 속도 pagination: { // 페이지네이션 있을 때 el: '.swiper-pagination', }, height:820,// ★ 슬라이드 높이 (css .swiper-container-vertical로 설정 가능) }); </script>
소스 코드가 복사되었습니다.
ThumbsSlider

Slide1

Slide2

Slide3

Slide4

Slide1

Slide2

Slide3

Slide4

<div id="swiper8" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div id="swiper9" thumbsSlider="" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div style="height:200px;">Slide1</div></div> <div class="swiper-slide"><div style="height:200px;">Slide2</div></div> <div class="swiper-slide"><div style="height:200px;">Slide3</div></div> <div class="swiper-slide"><div style="height:200px;">Slide4</div></div> </div> </div>  <script> const mySwiper9 = new Swiper('#swiper9' , { slidesPerView: 3, spaceBetween: 4, freeMode:true, watchSlidesProgress:true }); const mySwiper8 = new Swiper('#swiper8' , { thumbs: { swiper: mySwiper9, }, navigation: { prevEl: '#swiper8 .swiper-button-prev', nextEl: '#swiper8 .swiper-button-next', }, }); mySwiper8.controller.control = mySwiper9; </script>
소스 코드가 복사되었습니다.

Slider - swiper.js

Getting Started

Use swiper from CDN

Download assets

Navigation

default

White circle

Pagination

Default

Fraction - 페이징 숫자 출력

scrollbar

Default

Type

Default

vertical

ThumbsSlider