■ Swiper
○ Swiper란?
웹에 사용하기 적합한 오픈 소스 JavaScript 라이브러리
반응형 슬라이드 쇼 및 스와이퍼 기능을 쉽게 구현할 수 있음
○ Swiper 기본 세팅 (CDN 활용)
- CDN 개념
Content delivery Network 콘텐츠 전송 네트워크
서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용
- CSS 속성 및 스크립트 추가
<!-- Link Swiper's CSS 스와이퍼에 필요한 CSS 코드-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS 스와이퍼에 필요한 스크립트 코드 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
- Style 속성추가
속성에 대해서 미리 설정을 지정해줌
<style>
/* 스와이퍼 기본 Css속성 */
.swiper {
width: 100%;
height: 100%;
border: 1px solid #000;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
/* 이미지는 없으니까 빼도 됨 */
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
- Swiper 구조 설정
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper mySwiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<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>
</div>
</div>
- Script로 swiper 사용 객체 만들기
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".mySwiper", {});
// 변수에 저장 새로운 Swiper(대소문자 구분)
// .클래스 이름을 넣어줌 기본과 달라도 상관은 없음
</script>
○ Swiper 활용
<!-- Link Swiper's CSS 스와이퍼에 필요한 CSS 코드-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS 스와이퍼에 필요한 스크립트 코드 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
}
.swiper-slide{
text-align: center;
font-size: 18px;
background: red;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<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>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
});
</script>
</body>
○ Swiper 주요 옵션 변경
- 슬라이드 방향 (direction)
horizontal : 수평방향(기본)
vertical : 수직방향
let swiper = new Swiper(".swiper", {
direction: 'vertical'
});
- 슬라이드 루프 (loop)
true : 마지막 이후 다시 처음으로 돌아가기
false : 마지막에서 종료
구분은 , 찍어줘야함
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
});
- 자동재생 (autoplay)
자동 재생여부 설정
true: 자동재생
false : 종료
delay : 딜레이 시간 (ms)
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
});
딜레이 시간 넣기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : {
delay : 200,
}
});
- 애니메이션 속도 speed
애니메이션이 실행되는 속도(ms)
speed : 5000 (5초) {}중괄호가 끝나도 (,) 콤마는 넣어줘야 함.
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : {
delay : 1000, //1초마다
},
speed : 5000, //5초동안
});
- 한번에 보여지는 슬라이드 수
slidesPerView : 개수 // 이용시 대소문자 구분 필수
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
});
- 한번에 넘어가는 슬라이드 수
SlidesperGroup
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
});
- 슬라이드 간격설정
spaceBetween: 30, // 슬라이드 간격 단위px
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
- 슬라이드 내부 간격은 CSS로 통제
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
■ Swiper 연습
○ Swiper 두개 적용
스와이퍼2번째 적용 이름 변경
swiper2
script에서 다시 작성 새로운 변수에 넣고 적용할 클래스명 넣어주기
작동방식 작성
오른쪽 정렬 크기도 설정해보기
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
font-size: 18px;
background: red;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
}
.swiper2{
margin-top: 200px;
width: 300px;
height: 100px;
overflow: hidden;
border: 1px solid #000;
margin-left: auto;
/*왼쪽에 붙이기*/
}
.swiper2 .swiper-slide{
text-align: center;
background-color: aqua;
align-content: center;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<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>
</div>
</div>
<div class="swiper2">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<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>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
let swiper2 = new Swiper(".swiper2", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
○ Swiper 이미지 넣기
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
}
.swiper .swiper-slide img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/2/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/3/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/4/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/5/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/6/800/200" alt="">
</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
○ 이미지와 글자 같이 넣기
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
display: flex;
}
.swiper .swiper-slide img{
width: 70%;
height: 100%;
display: block;
object-fit: cover;
}
.swiper .swiper-slide .swiper-text{
width: 30%;
align-content: center;
}
.swiper .swiper-slide .swiper-text p{
text-align: center;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/2/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/3/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/4/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/5/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/6/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
○ 좌우로 변경하기
크기도 조금 작게 조절하기
400 * 300 내부에 이미지 두개씩
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 400px; /* 크기조절 */
height: 300px; /* 크기조절 */
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
/* display: flex; */ /* flex 삭제 */
}
.swiper .swiper-slide img{
width: 100%; /* 너비 변경 */
height: 70%; /* 높이 변경 */
display: block;
object-fit: cover;
}
.swiper .swiper-slide .swiper-text{
/* width: 30%; */ /* 너비 삭제 */
height: 30%; /* 높이 지정 */
align-content: center;
}
.swiper .swiper-slide .swiper-text p{
margin: 5px; /* 마진 수정 */
text-align: center;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/2/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/3/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/4/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/5/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/6/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
// direction : "vertical", 방향 조절
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
■ Swiper 버튼 및 슬라이드
○ 페이지 버튼
pagination
false 페이징 끔
true 페이지 켬
type 페이지 종류
(bullets, fraction, progressbar, custom)
- HTML
<div class="swiper">
<div class="swiper-wrapper">
<!--슬라이드 부분-->
</div>
<!--wrapper 밑에 설정 -->
<div class="swiper-pagination"></div>
</div>
- Script
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
pagination: {
el: '.swiper-pagination',
type: 'bullets'
},
});
- 밖에 내가 원하는 곳에 배치
.swp{
display: flex;
justify-content: center;
height: 50px;
align-items: center;
}
<div class="swp"></div>
// swiper 밖에 설정 이름 설정 overflow: hidden으로 안보임
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
pagination: {
el: '.swp', //이름 다른 이름이어도 상관은 없음 대신 배치를 알아서 해야함
type: 'bullets',
clickable : true, // bullets을 클릭하면 이동
},
});
○ 이전 다음 버튼 설정
navigation
nextEl : 다음버튼 선택
prevEl : 이전버튼 선택
- HTML
<div class="swiper">
<div class="swiper-wrapper">
<!--슬라이드 부분-->
</div>
<!--wrapper 밑에 설정 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
- Script
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
- 슬라이드 처음과 끝에 투명해지게 하기
슬라이드 누르면 사라지게 하기
let swiper = new Swiper(".swiper", {
loop : false, // 루프 중지
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
watchOverflow: true, //처음과 끝 숨기기
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: true, //슬라이드를 누르면 숨기기
},
});
- 버튼 밖으로 변경
<div class="button">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>.button{
width: 500px; /* 너비지정 */
height: 100px;
display: flex;
justify-content: space-between;
position: absolute; /* 위치 지정 */
top: 100px;
left: 50%;
transform: translate(-50%, 0);
}
.button > div{
position: relative; /* 내부 요소가 absolute로 되어 있어서 수정 */
}
- 다른이름으로 다른 형태를 넣어서 링크
<div class="button">
<div class="a"></div>
<div class="b"></div>
</div>let swiper = new Swiper(".swiper", {
loop : false, // 루프 중지
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
watchOverflow: true, //처음과 끝
navigation: {
nextEl: '.a', //클래스명 이름
prevEl: '.b', //클래스명 이름
hideOnClick: true, //슬라이드를 누르면 숨기기
},
});.button > div{
width: 30px;
height: 30px;
background-color: red;
}
- disabledClass 비활성화 되었을때 클래스 이름
'swiper-button-disabled' 기본값
let swiper = new Swiper(".swiper", {
loop : false, // 루프 중지
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
watchOverflow: true, //처음과 끝
navigation: {
nextEl: '.a',
prevEl: '.b',
hideOnClick: true, //슬라이드를 누르면 숨기기
disabledClass: 'c', //비활성화시 클래스명
},
});
.button > .c{ // c라는 클래스 일때 변동값 넣어주기
background-color: aqua;
}
- hiddenClass 숨겨질때 클래스 이름
'swiper-button-hidden'
○ 스크롤바
scrollbar
<!--스와이퍼 안에 레퍼 밖에 id설정은 높이수정하려면-->
<div class="swiper-scrollbar" id="ss"></div>#ss{
background-color: aqua;
height: 10px;
}
.swiper-scrollbar-drag{
background-color: blue;
}let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
scrollbar: {
el: '.swiper-scrollbar',
draggable: true, // 드래그 되기
hide: true, // 미사용시 숨김
dragSize: '50px', //너비
}
});
○ effect 슬라이드 효과
slide: 기본 슬라이드 효과 (기본값)
fade: 페이드 효과
cube: 큐브 효과
coverflow: 커버플로우 효과
flip: 플립 효과
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
effect : 'flip',
});'HTML + CSS > Javascript' 카테고리의 다른 글
| Js - GSAP (0) | 2024.10.10 |
|---|---|
| Js - Fullpage (0) | 2024.10.08 |
| Java Script 기초 (2) | 2024.09.09 |