https://jh91.tistory.com/entry/javescript-swiperjs-swiper%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C
[JS] swiper.js / swiper슬라이드
swiper 슬라이드 사용법 입니다. 시간이 없으면 3-3 javascript 부분만 보시면 됩니다. 1.swiper.js swiper.js는 쉽게 슬라이드를 만들수 있게 해놓은 스크립트 이다. 공식 홈페이지에서 자료를 볼수 있다. sw
jh91.tistory.com
<!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>swiper</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<style>
.wrap{
margin:0 auto;
position:relative;
overflow: hidden;
}
.project .mySwiper{
width: 90%;
margin:100px auto 0;
}
.project .swiper-slide{
transform: scale(0.8);
transition:transform 0.5s;
}
.project .swiper-slide img{
width: 100%;
}
.project .swiper-slide.swiper-slide-active{
transform:scale(1);
/* 활성화된 이미지만 이미지 확대 */
}
</style>
</head>
<body>
<div class="wrap">
<section class="project">
<div class="swiper mySwiper">
<!-- 약속 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/banner_1.jpg" alt="배너01">
</div>
<div class="swiper-slide">
<img src="img/banner_2.jpg" alt="배너02">
</div>
<div class="swiper-slide">
<img src="img/banner_3.jpg" alt="배너03">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
</div>
<script>
// 1. swiper
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3, //보여지는 갯수
spaceBetween: 30, //각각 간격
centeredSlides: true, //센터모드-active 클래스 붙음.
loop: true, //루프
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>'Javascript > jQuery' 카테고리의 다른 글
| svg 애니메이션 적용하기 [html/css/js/jquery] (0) | 2022.11.23 |
|---|---|
| swiper갤러리 (0) | 2022.11.22 |
| scroll시 header 변화 (0) | 2022.11.22 |
| 마우스 휠 좌우 스크롤 (0) | 2022.11.22 |
| $(window).on("scroll resize", function(){..}); & 콜백함수 (0) | 2022.11.03 |