Swiper JS를 사용한 간편한 회전식 슬라이더 튜토리얼

Swiper Js은 3분 이내에 캐러셀 슬라이더를 만들 수 있는 멋진 작은 라이브러리입니다.

CDN을 사용하여 프로젝트에 직접 로드하거나 NPM을 통해 설치하거나 GitHub에서 파일을 다운로드하여 시작할 수도 있습니다. 라이브러리를 사용하여 일반 슬라이더, 3D 큐브, 멋진 페이드 효과가 있는 시차 슬라이더를 만들 수 있습니다.



Youtube: Swiper JS Tutorial

우리가 다룰 주제는 다음과 같습니다.

SwiperJS 설치

HTML 및 CSS에서 Swiper JS 코드 설정

스위퍼 스타일링하기

스위퍼 스타일링하기

3D 큐브 회전목마 슬라이더

페이드 효과가 있는 시차 슬라이더

코드가 얼마나 단순한지 알고 싶다면 아래에서 확인하십시오.

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Slide 1
        </div>
        <div class="swiper-slide">
            Slide 2
        </div>
        <div class="swiper-slide">
            Slide 3
        </div>
    </div>
</div>

<script>
  var mySwiper = new Swiper ('.swiper-container')
</script>

Swiper J는 모든 프로젝트, 일반 HTML, WordPress 또는 반응에 설치할 수 있습니다. 관심이 있는 경우 공식 URL에서 확인할 수 있습니다.
https://swiperjs.com/

팔로우 및 지원:

제 채널을 구독해 주시면 감사하겠습니다 :)

💬 Discord

❤ Patreon

더보고 싶어:

매일 새로운 멋진 콘텐츠를 게시하도록 노력하겠습니다. 최신 항목은 다음과 같습니다.