Swiper

swiper란?

슬라이드 기능을 쉽게 만들 수 있도록 한 스크립트
사이트 : https://swiperjs.com/

👉 사용 방법

1) 링크 가져오기

//스와이퍼 링크
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
//js 링크
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

이 링크가 있어야 스와이퍼가 작동된다.

2) 마크업

<div class="swiper mySwiper(개별이름 지정)">
	<div class="swiper-wrapper">
		<div class="swiper-slide">1</div>
		<div class="swiper-slide">2</div>
		<div class="swiper-slide">3</div>
		<div class="swiper-slide">4</div>
		<div class="swiper-slide">5</div>
	</div>
	<!-- 옵션 -->
	<a href="" class="swiper-button-prev">이전</a>
	<a href="" class="swiper-button-next">다음</a>
</div>

mySwiper 이름은 내 마음대로 설정 가능,
나머지 swiper, swiper-wrapper, swiper-slide 는 고정으로 사용해야 한다.

3) 실행문

<script>
    $(function(){

        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",
                type: "progressbar",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });

    })
</script>

4) css

<style>
	.mySwiper {}
    .mySwiper .swiper-slide {}
    .mySwiper .swiper-button {}
    ...
</style>

👉 swiper 예시

<div class="swiper name-slide">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<a href="">
				<div class="img-area"><img src="" alt=""></div>
				<div class="text-wrap">
					<strong class="title">제목</strong>
					<span class="desc">내용글</span>
				</div>
			</a>
		</div>
	</div>
	<div class="btn-box">
		<button type="button" class="btn prev">
        	<span class="blind">이전</span>
        </button>
		<button type="button" class="btn next">
        	<span class="blind">다음</span>
        </button>
	</div>
</div>