모니터 사이즈에 따라 유동적인 swipe 소스 있을까요? 채택완료
원조돌맹이
4년 전
조회 3,546
http://new.namchon.org 사이트를 제작 중인데, 모니터에 따라 메인 이미지가 crop됩니다.
1280*1024에서 보면 메인 이미지가 가득차게 보이지만, 1920*1080에서 보면 메인 이미지 세로 길이는 동일하지만 가로가 화면에 가득차게 됩니다.
여기까지는 여기저기 찾아서 했는데, navigation과 pagination이 안됩니다.
참고할만한 소스가 있을까요?
swipe 소스는 많지만, 모니터에 따라 이미지가 자동으로 crop되는 소스는 찾기가 어렵네요...
감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
원조돌맹이
4년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
.swiper-container {
width: 100%;
height: 550px;
background-repeat:no-repeat;
background-position:center;
}
.swiper-slide {
width: 100%;
height: 550px;
background-repeat:no-repeat;
background-position:center;
display:block;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url('http://new.namchon.org/images/main_vis01.jpg');"></div>
<div class="swiper-slide" style="background-image:url('http://new.namchon.org/images/main_vis02.jpg');"></div>
<div class="swiper-slide" style="background-image:url('http://new.namchon.org/images/main_vis03.jpg');"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
[/code]