답변 1개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><!-- <a href="https://codesandbox.io/p/sandbox/9z5lx9?file=%2Findex.html%3A6%2C29" target="_blank" rel="noopener noreferrer">https://codesandbox.io/p/sandbox/9z5lx9?file=%2Findex.html%3A6%2C29</a> --></p>
<p> </p>
<p><!DOCTYPE html>
<html lang="en"></p>
<p><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" /></p>
<p> <style></p>
<p>
:root {</p>
<p> --swiper-pagination-bullet-width: 16px;
--swiper-pagination-bullet-height: 16px;
--swiper-pagination-color: url(<a href="https://cdn-icons-png.flaticon.com/16/4398/4398552.png);" target="_blank" rel="noopener noreferrer">https://cdn-icons-png.flaticon.com/16/4398/4398552.png);</a>
--swiper-pagination-bullet-inactive-color: url(<a href="https://cdn-icons-png.flaticon.com/16/4398/4398532.png);" target="_blank" rel="noopener noreferrer">https://cdn-icons-png.flaticon.com/16/4398/4398532.png);</a>
}
html,
body {
position: relative;
height: 100%;
}</p>
<p> body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}</p>
<p> swiper-container {
width: 100%;
height: 100%;
}</p>
<p> swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}</p>
<p> swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head></p>
<p><body></p>
<p> <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></p>
<p> <script src="<a href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script></a>
</body></p>
<p></html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인