본문 바로가기
웹/HTML-CSS-자바스크립트

(웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명)

by 공부가싫다가도좋아 2021. 7. 19.
반응형

회전형 슬라이드 만들기

포스팅 요약

1. 최종 완성 작품

2. swiper 사용해서 3D 슬라이드 만드는법

3. 3D슬라이드 만든 전체 코드

4. 3D슬라이드 코드 다운받을 수 있는 깃허브 주소

 

더보기

API를 사용해서 회전형(?) 슬라이드를 만드는 법을 알려드리려고 합니다.

아마 포스팅을 다 보고 나시면, API를 사용해서 회전형 슬라이드 뿐만이 아니라 여러가지 

재미있는 효과를 정말 간단하게 구현할 수 있습니다.

<최종 완성 작품>

 

<swiper 사용해서 3D 슬라이드 만드는법>

1. swiper사이트 접속

1. 아래 링크를 클릭하여 접속합니다.

https://swiperjs.com

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

2. get Started 클릭

2. CDN을 통해 swiper 사용하기

1. 왼쪽 installation메뉴에서 Use Swiper from CDN 클릭

 

2. CDN복사하기

(* 빨간 네모박스로 표시한 두줄만 복사하세요~ min.css & min.js)

 

3. 내코드에 붙여넣기

(*html 코드의 title태그 아래 붙여넣기)

 

3. 원하는 효과를 담은 API 찾기

1. 왼쪽 메뉴에서 what next?클릭

 

2. 원하는 효과를 담은 API 찾으러 가기

(*API Documentation 클릭)

 

3. API사용시, HTML 형식 보기

(*자세한 설명은 더보기에, 어떻게 하는지 이미 알면 패쓰)

더보기

- 왼쪽 카테고리에서 Swiper Full HTML Layout을 클릭합니다.

 

- 빨간 박스 안의 html형식을 그대로 복사해서 코드에 붙여 넣습니다.

(* 빨간 박스 안의 HTML 코드에서 사용한 class명을 사용해야 됩니다. )

 

- 슬라이드를 더 추가하고 싶다면 주석의 <!--Slides -->아래

Slide 4, Slide 5...를 복붙 해줍니다. 슬라이드 수를 줄이고 싶으면 삭제하면 됩니다.

 

-pagination이 필요하다면, pagination단어가 포함된 클래스를 냅두고, 필요없으면 그 줄을 지웁니다.

(* pagination이란 지금 보고있는 슬라이드가 몇 번째 슬라이드인지 표시해주는 효과입니다.

저는 필요하므로 냅뒀습니다.)

 

-버튼이 필요하다면 button 단어가 포함된 클래스를 냅두고, 필요없으면 그 줄을 지웁니다.

(저는 필요하므로, 냅뒀습니다. 자동 슬라드일 경우 삭제 해도 됩니다.)

 

- 스크롤이 필요하다면 scrollbar단어가 포함된 클래스를 냅두고 필요없다면 그 줄을 지웁니다.

(저는 필요 없으므로 지웠습니다.)

 

4. 왼쪽 카테고리에서 원하는 효과 사용법 보기

(우리가 봐야될 건, pagination, coverflow Effect 두개이지만

어떻게 사용하는지 방법은 똑같으므로, coverflow Effect하나만 설명하겠습니다.  )

 

5. js코드 복사하기

오른쪽 박스를 js 파일에 복붙합니다. 

왼쪽빨간 박스 안에는 Coverflow 에서 사용할 수 있는 효과들입니다.

(*자세한 설명은 더보기에, 어떻게 하는지 이미 알면 패쓰)

더보기

depth: 슬라이드간의 깊이를 조절

modifier: 다른 param의 값에 modifier값을 곱해줌.

(예를들어 depth: 100, rotate:20 으로 설정했는데 modifier:2 이면 최종적으로 depth:200, rotate:40인 효과를 볼 수 있음)

rotate: 회전 각도

slideShadows: 슬라이드 그림자

stretch: 슬라이드간의 간격

 

6. js에 복사한 코드 붙여 넣고, 원하는 param들 가져오기

(*자세한 설명은 더보기에, 어떻게 하는지 이미 알면 패쓰)

더보기

loop: true면 무한 슬라이드, false면 그냥 슬라이드.

centeredSlides: 슬라이드 센터에 위치시키기

slidesPerView: 미리 볼 수 있는 슬라이드 개수

navigation: 슬라이드 왼쪽 오른쪽 버튼

effect: 사용하려는 효과 이름

coverflowEffect: 사용하려는 효과에서의 상세설정

pagination: 현재 페이지 표시

<3D슬라이드 만든 전체 코드>

 

<html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <link rel="stylesheet" href="CSS/style.css">

    </head>
    <body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="image/flower.jpg"></div>
                <div class="swiper-slide"><img src="image/fox.jpg"></div>
                <div class="swiper-slide"><img src="image/lightning.jpg"></div>
                <div class="swiper-slide"><img src="image/moon.jpg"></div>
                <div class="swiper-slide"><img src="image/nature.jpg"></div>
                <div class="swiper-slide"><img src="image/space.jpg"></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <script src="JS/JS.js"></script>

    </body>

</html>

 

<CSS>

.swiper-container {
    width: 700px;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff; /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-shadow: 0px 2px 10px 0px #848484;
}

 

<JS>

let swiper = new Swiper('.swiper-container', {

  loop: true,
  centeredSlides: true,
  slidesPerView: '3',
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 10,
    depth: 100,
    slideShadows: true,
    // modifier:1,
    // stretch: 50
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },

});

 

<3D슬라이드 코드 다운받을 수 있는 깃허브 주소>

 

https://github.com/6810779s/-web-3D_slideShow

 

6810779s/-web-3D_slideShow

Contribute to 6810779s/-web-3D_slideShow development by creating an account on GitHub.

github.com

 

도움이 되셨다면 왼쪽 하단 하트꾹 눌러주세요 :)

반응형
저작자표시 비영리 변경금지

'웹 > HTML-CSS-자바스크립트' 카테고리의 다른 글

scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기  (1) 2021.08.15
[2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침  (2) 2021.08.09
(웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명)  (40) 2021.08.04
(웹)자바스크립트로 슬라이드 만들기(초간단)  (25) 2021.05.29
(웹)자바스크립트 - 실시간 시계 (초간단)  (0) 2021.05.08

관련글

댓글

티스토리툴바