보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다.
홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로 사이트의 첫인상을 좌우하는 가장 중요한 부분입니다.
이 슬라이드는 스와이퍼라는 자바스크립트 라이브러리 사용을 추천합니다.
스와이프 이동, 버튼 이동, 화살표 이동, 자동 플레이, 루프, 반응형의 기능을 캐러셀 슬라이드에 적용이 모두 가능한 라이브러리입니다.
swiper.js 사이트
구글에서 swiper js를 검색하여 사이트로 이동합니다.
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
swiper.js cdn 설치
- 첫 화면에서 Get Started를 선택하여 페이지 이동 후, Use Swiper from CDN안의 코드를 복사합니다 .
- Min.js 파일은 원본 파일에서 최적화 되어 압축된 파일이므로. 일반 보다 min.js.파일 코드를 가져와 쓰는 것이 효율적입니다.
스와이퍼 슬라이드(swiper slide) 적용
첫화면 Demos 에서 적용할 슬라이드 타입의 Core를 선택하면 전체 코드와 미리보기가 주어지고, 이 코드를 복사하면 됩니다.
스와이퍼 슬라이드(swiper slide) 적용 예제
실무에서 자주 사용하는 pagination, 양쪽 화살표, autoplay와 루프가 적용된 슬라이드입니다.
이미지는 https://placeimg.com/ 에서 임의의 이미지를 가지고 왔서 불러오는데 시간이 걸립니다.
사용하실 때는 각자의 이미지를 사용하시면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper js</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<style>
html,
body {
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://placeimg.com/640/480/any" />
</div>
<div class="swiper-slide">
<img src="https://placeimg.com/640/480/animals" />
</div>
<div class="swiper-slide">
<img src="https://placeimg.com/640/480/nature" />
</div>
<div class="swiper-slide">
<img src="https://placeimg.com/640/480/people" />
</div>
<div class="swiper-slide">
<img src="https://placeimg.com/640/480/tech" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
화면 보기(Result 클릭)
라이브러리가 아닌 자바스크립트와 제이쿼리로 직접 구현한 캐러셀 슬라이드가 필요할 경우,
아래의 포스트로 이동해 주세요.
https://goddino.tistory.com/14
[js/jQuery] 반응형 캐러셀(Carousel) 슬라이드 구현하기
홈페이지의 가장 중요한 비주얼 슬라이드 부분! 메인 페이지의 메인 슬라이드를 javascript, jQuery를 이용하여 구현을 합니다.slick slide 또는 owl slide를 가져와서 사용하면 매우 편하지만, 캐러셀 슬
goddino.tistory.com
'💻CODING > javascript' 카테고리의 다른 글
| [js] 페이지 상단으로 자동 스크롤 이동 구현 (ft. gsap scrollTo) (0) | 2021.06.13 |
|---|---|
| [js] 떠다니는 이미지 애니메이션 구현(ft. 부유하는 요소, gsap.to) (0) | 2021.06.08 |
| [js] 자바스크립트 애니메이션 라이브러리, gsap 사용법 (0) | 2021.05.31 |
| [js] 글자 타이핑 효과 라이브러리 소개 (2) | 2021.05.08 |
| [js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) (0) | 2021.03.14 |
댓글