스와이프가 가능한 반응형 슬라이더이다.
왼쪽 오른쪽 버튼이 지원되고, Pagination과 Progress bar도 있다.
반응형 분기점도 설정 가능하다.
MIT라이선스라서 자유롭게 사용할 수 있다구 한다
👇시작하기!
다운로드
https://github.com/nolimits4web/swiper/releases
v5.4.5 이후부터는 SCSS만 있고 CSS가 없다. 내가 못찾는건지 없는건지 모르겠다
그리고 v4.5.1까지는 반응형이 잘 동작하지만
다음 버전부터는 똑같이 작성한 breakpoints반응형 코드가 제대로 동작하지 않았다.
그래서 그나마 최신이면서 안정적으로 작동하는 4.5.1버전을 사용하였다.
필요파일
dist/css/swiper.min.css
dist/js/swiper.min.js
or CDN으로 사용할 경우
<!-- Swiper -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>👇사용법
일일이 첨부터 만들기보단 데모페이지에서 비슷한기능 가져와서 시작하는게 나을듯.. 어렵당🤮
데모 페이지
https://swiperjs.com/demos/
HTML
...
<head>
...
<!-- Swiper -->
<link rel="stylesheet" href="plugin/swiper/css/swiper.min.css">
<script src="plugin/swiper/js/swiper.min.js"></script>
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides ::슬라이더 -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- If we need pagination ::페이지 네비게이션(선택) -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons ::양옆 좌우 버튼(선택) -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</body>
...CSS
.swiper-container {
width: 600px;
height: 300px;
}JavaScript
*DOM이 로드되었을 때 실행되어야 함
$(function(){
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical', // 방향
slidesPerView: 3, // 슬라이드를 한번에 3개를 보여준다
slidesPerGroup : 3, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음
spaceBetween: 30, // 슬라이드간 padding 값 30px 씩 떨어뜨려줌
// 그룹수가 맞지 않을 경우 빈칸으로 메우기
// 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
loopFillGroupWithBlank : true,
loop: false, // loop 를 true 로 할경우 무한반복 슬라이드, false 로 할경우 슬라이드의 끝에서 더보여지지 않음
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
type: 'progressbar', // And if we need scrollbar 진행바
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 반응형
breakpoints: {
1280: {
slidesPerView: 3,
slidesPerGroup: 3,
},
720: {
slidesPerView: 1,
slidesPerGroup: 1,
},
}
})
});reference
https://ktsmemo.cafe24.com/s/SwiperJS/358
https://uxgjs.tistory.com/141
https://jintrue.tistory.com/entry/javascript-jQuery-Swiper-응용
https://m.blog.naver.com/anedthh/222014406404
https://ktsmemo.cafe24.com/s/SwiperJS/367
자기계발일지. 디자인+퍼블짬밥 1년4개월된 초보자입니다.. 여긴 개발자분들만 계시넹