swiper & aos 플러그인 - 순수 자바스크립트 가벼운 플러그인
1. 스와이프
1-1. cdn 삽입 3개
부트스트랩4 https://getbootstrap.com/docs/4.6/getting-started/introduction/
스와이프 https://swiperjs.com/get-started
aos https://michalsnik.github.io/aos/
1-2. 태그 구조 가져오기 - Add Swiper HTML Layout
id를 겉박스에 넣어, 스와이프 이외에 다른 컨텐츠가 들어올 것 대비
1-3. 커스터마이징 자바 - 외부연동 swipe.js
1-3-1) js 외부연동
function( ) 이름 없는 함수 를 실행하는 시점 -> load 'event' "화면이 완료되면 실행해!"
- 이벤트 ex) click, hover, swipe
window.onload = function(){
}
외부 연동하면 HTML 안의 < script scr > 맨 위로 올려도 됨
1-3-2) 스와이프 실행식 - 자바스크립트
1-3-3) HTML-js 실행식, 클래스 연동
+) 스와이프 메서드 swiperEvent.destroy( );
2. 스와이퍼 버튼 제어하기
2-0. 기본 세팅
CSS
background-repeat: no-repeat;
<style>
#sliderBanner .swiper-slide{ height:500px; background-repeat: no-repeat; }
.btns{ font-size: 22px;}
.slideritem0{ background: url( 생략 );}
.slideritem1{ background: url( 생략 );}
.slideritem2{ background: url( 생략 );}
</style>
HTML
class="position-relative container px-5"
<div id="sliderBanner" class="position-relative container px-5">
<div class="swiper eventBanner">
<div class="swiper-wrapper">
<div class="swiper-slide slideritem0"></div>
<div class="swiper-slide slideritem1"></div>
<div class="swiper-slide slideritem2"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar d-none"></div>
</div>
</div>2-1. 부트스트랩4만 사용한 미션 (CSS 노터치)
힌트) 스와이프 버튼, position: absolute -> 부모 포지션을 따른다!
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
CSS
<style>
#sliderBanner .swiper-slide{ height:500px}
.btns{ font-size: 22px;}
.slideritem0{ background: url(https://file.cafe24cos.com/banner-admin-live/upload/bowell/3e692359-77ff-4032-9beb-a06450eea6f1.png);}
.slideritem1{ background: url(https://file.cafe24cos.com/banner-admin-live/upload/bowell/4440f8b1-8f1c-4e36-a5b2-a3594784a9d6.jpeg);}
.slideritem2{ background: url(https://file.cafe24cos.com/banner-admin-live/upload/bowell/5ef31707-c96b-467e-e798-fecd05a576e2.png);}
</style>HTML
swiper-button-prev & next 버튼을 div class="swiper eventBanner" 밖으로 빼준다! (위치 옮김)
<div id="sliderBanner" class="position-relative container px-5">
<div class="swiper eventBanner ">
<div class="swiper-wrapper">
<div class="swiper-slide slideritem0"><h3 class='sr-only'>Slide 1</h3></div>
<div class="swiper-slide slideritem1"><h3 class='sr-only'>Slide 1</h3></div>
<div class="swiper-slide slideritem2"><h3 class='sr-only'>Slide 1</h3></div>
</div>
<div class="swiper-pagination mb-3"></div>
<div class="swiper-scrollbar d-none"></div>
</div>
<div class="swiper-button-prev "></div>
<div class="swiper-button-next "></div>
</div>자바 스크립트
페이지네이션 버튼에 ○○●○ 대신, 숫자 넣는 방법 ${index}
<script>
window.onload = function(){
const mainSetting ={
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return `<span class="dot swiper-pagination-bullet">${index}</span>`;
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
}
const swiperEvent = new Swiper('.eventBanner.swiper', mainSetting);
}
</script>
⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇
HTML : 스와이프 버튼들 < > position: absolute -> 부모 포지션을 따른다!
-> 부모에 position: relative 지정 (< >들, 옆에 가서 붙으라고)
<div class="swiper-button-prev"></div> <!--얘네 포지션: abs 임-->
<div class="swiper-button-next"></div>- 포지션 abs : 부모를 기준으로 위치를 (좌표로) 지정
- 포지션 rel : 가장 가까이 있는 상위 객체(=body) 기준으로 유기적 이동
자바 스크립트 : 스와이퍼 안의 버튼을 커스터마이징 하는 법
└> span 태그 안에 클래스로 바로 넣어버림!!!
완성본
2-2. 하드코딩 CSS 미션
힌트) 폰트패밀리-폰트어썸: 유니코드(<> 모양) -> 원래대로 돌려라 (폰트패밀리-본고딕)
CSS
<style>
.swiper-slide{ height:500px; background-repeat: no-repeat;}
.btns{ font-size: 22px;}
.slideritem0{ background: red;}
.slideritem1{ background: blue;}
.slideritem2{ background: yellow;}
.slideritem3{ background: green;}
.slideritem4{ background: purple;}
</style>HTML
<div id="sliderBanner" class="position-relative container px-5">
<div class="swiper eventBanner">
<div class="swiper-wrapper">
<div class="swiper-slide slideritem0"><h3 class='sr-only'>Slide 1</h3></div>
<div class="swiper-slide slideritem1"><h3 class='sr-only'>Slide 1</h3></div>
<div class="swiper-slide slideritem2"><h3 class='sr-only'>Slide 1</h3></div>
<div class="swiper-slide slideritem3"><h3 class='sr-only'>Slide 1</h3></div>
<div class="swiper-slide slideritem4"><h3 class='sr-only'>Slide 1</h3></div>
</div>
<div class="swiper-pagination mb-3"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div> js는 차이 없음
<script>
window.onload = function(){
const mainSetting ={
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return `<span class="bg-transparent border border-dark px-2 w-auto h-auto btns rounded-0 swiper-pagination-bullet">${index + 1}</span>`;
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
}
const swiperEvent = new Swiper('.eventBanner.swiper', mainSetting);
}
</script>⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇
폰트패밀리-폰트어썸: 유니코드(<> 모양)
<style>
.swiper-button-next:after,
.swiper-button-prev:after{ font-family: swiper-icons } // 폰트어썸-유니코드
</style>
⬇
- CSS : 원래대로 돌려라! { font-family: 본고딕 }
- CSS : swiper-button-prev & swiper-button-next에 border-top 지정
└> abs에는 너비 값 NO & 패딩값 삽입 NO / rel에게 너비값 넣어 조정하라! - CSS : 페이지네이션 버튼 활성화(active)시, 배경색 검정 (!important 부트5 CSS보다 우선시)
- HTML : col-8, 마진좌우-auto, container
완성본
