- Swiper Library API → 스와이퍼 API 적용해서 옵션 더 추가할 수 있음!
- 스와이퍼 라이브러리 사용법
- next, prev 버튼 코드 도움 받은 사이트 → HTML/CSS 부분 가져와서 적용함
mdn
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
버튼까지 적용한 코드
<!-- // index.html -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide1</div>
<div class="swiper-slide">Slide2</div>
<div class="swiper-slide">Slide3</div>
</div>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false">
</div>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false">
</div>
</div>
/* style.css */
.swiper-container {
width: auto;
height: auto;
overflow: hidden;
}
.swiper-slide button {
background-color: white;
border: none;
}
.swiper-button-next,
.swiper-button-prev {
width: 30px;
height: 30px;
background-size: 30px 30px;
}
.swiper-button-next {
transform: translateX(-500px) translateY(-20px);
}
.swiper-button-prev {
transform: translateX(500px) translateY(-20px);
}
// index.js
const mySwiper = new Swiper('.swiper-container', {
// 옵션 설정
direction: 'horizontal',
enabled: true,
spaceBetween: -10,
slidesPerView: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: { // 페이저 버튼 사용자 설정
el: '.pagination', // 페이저 버튼을 담을 태그 설정
clickable: true, // 버튼 클릭 여부
type: 'bullets', // 버튼 모양 결정 "bullets", "fraction"
renderBullet: function (index, className) { // className이 기본값이 들어가게 필수 설정
return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
},
renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
return '<span class="' + currentClass + '"></span>' + '<span class="' + totalClass + '"></span>';
}
},
});js파일 분리할 때
- Swiper 관련 js코드는 html 파일 내부의
- Swiper Library mdn파일은
/* html 파일*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Title</title>
/* External Libraries */
/* Swiper Framework mdn */
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /><!-- CSS Swiper-->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js">
<!-- JS Swiper -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script>
/* Swiper 코드는 여기에*/
const mySwiper = new Swiper(".swiper-container", {
// 옵션 설정
direction: "horizontal",
enabled: true,
slidesPerView: 5,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
// 페이저 버튼 사용자 설정
el: ".pagination", // 페이저 버튼을 담을 태그 설정
clickable: true, // 버튼 클릭 여부
type: "bullets", // 버튼 모양 결정 "bullets", "fraction"
renderBullet: function (index, className) {
// className이 기본값이 들어가게 필수 설정
return '<a href="#" class="' + className + '">' + (index + 1) + "</a>";
},
renderFraction: function (currentClass, totalClass) {
// type이 fraction일 때 사용
return (
'<span class="' +
currentClass +
'"></span>' +
'<span class="' +
totalClass +
'"></span>'
);
},
},
});
</script>
/* Linking JS File */
<script type="text/javascript" src="course.js"></script>
</body>
</html>
컴퓨터공학부 대학생. 4학년. velog 꾸미기 : https://velog.io/@ybkim3603/Velog벨로그-사용법-튜토리얼 Git컨벤션: https://velog.io/@shin6403/Git-git-커밋-컨벤션-설정하기 커리어 방향 설정 모음글:https://velog.io/@eon7500/커리어-방향성-설정에-도움되는-글