모니터 사이즈에 따라 유동적인 swipe 소스 있을까요?
관련링크
http://new.namchon.org
68회 연결
본문
http://new.namchon.org 사이트를 제작 중인데, 모니터에 따라 메인 이미지가 crop됩니다.
1280*1024에서 보면 메인 이미지가 가득차게 보이지만, 1920*1080에서 보면 메인 이미지 세로 길이는 동일하지만 가로가 화면에 가득차게 됩니다.
여기까지는 여기저기 찾아서 했는데, navigation과 pagination이 안됩니다.
참고할만한 소스가 있을까요?
swipe 소스는 많지만, 모니터에 따라 이미지가 자동으로 crop되는 소스는 찾기가 어렵네요...
감사합니다.
답변 1
잘 되네요! 감사합니다.
<!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>
답변을 작성하시기 전에 로그인 해주세요.