swiper pagination을 png 이미지로 변경할수 있나요?
본문
안녕하세요
스와이퍼 pagination 기존 bullet 모양에서
화살표 모양png로 변경하고싶은데...
기존bullet 을 삭제하고 png로 바꾸는 방법을 모르겠네요ㅜㅜ
가능한 방법이 있을까요?...
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<!-- https://codesandbox.io/p/sandbox/9z5lx9?file=%2Findex.html%3A6%2C29 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<style>
:root {
--swiper-pagination-bullet-width: 16px;
--swiper-pagination-bullet-height: 16px;
--swiper-pagination-color: url(https://cdn-icons-png.flaticon.com/16/4398/4398552.png);
--swiper-pagination-bullet-inactive-color: url(https://cdn-icons-png.flaticon.com/16/4398/4398532.png);
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
swiper-container {
width: 100%;
height: 100%;
}
swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<swiper-container class="mySwiper" pagination="true">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
</swiper-container>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
