<h1>About</h1>
<div class="description">
이 팁은 스와이퍼 라이브러리를 사용하여 배너를 스와이프 형식으로 좌우로 자동 롤링되도록 만들었습니다. <br><br>
(이미지출처 : https://placeimg.com )
</div>
<hr>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://placeimg.com/800/100/tech" alt="tech">
</div>
<div class="swiper-slide">
<img src="https://placeimg.com/800/100/people" alt="people">
</div>
</div>
</div>
<hr>
<h2>How to Make</h2>
<ul>
<li>Settings > JS > 'Swiper' 검색 후 추가한다.</li>
<li>
https://swiperjs.com/get-started 에서 'Use Swiper from CDN' 부분의 코드를 Settings > HTML > head 쪽에 붙여넣기 한다.
<xmp>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</xmp>
</li>
<li>html 코드를 작성한다. <br>
<xmp>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://placeimg.com/800/100/tech" alt="tech">
</div>
<div class="swiper-slide">
<img src="https://placeimg.com/800/100/people" alt="people">
</div>
</div>
</div>
</xmp></li>
<li>
CSS 코드를 추가한다. <br>
<xmp>
.swiper{
width:800px;
height:100px;
}
</xmp>
</li>
</ul>
/* Common */
.description{
background:#eee;
padding:20px;
}
hr{
height:10px;
background:#eee;
border: 0;
margin: 40px auto;
max-width:400px;
}
xmp,pre{
background:#111;
color:#fff;
padding: 5px 20px;
display:inline-block;
}
li{
list-style:number;
line-height:1.6;
}
/* swiper */
.swiper{
width:800px;
height:100px;
}const swiper = new Swiper('.swiper', {
// Optional parameters
// direction: 'horizontal',
loop: true,
autoplay: {
delay: 5000,
},
// If we need pagination
//pagination: {
// el: '.swiper-pagination',
//},
// Navigation arrows
//navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
//},
// And if we need scrollbar
//scrollbar: {
// el: '.swiper-scrollbar',
//},
});
External CSS
This Pen doesn't use any external CSS resources.