slide 기능 구현 - 산출물

https://github.com/aloha-jh/slide

GitHub - aloha-jh/slide: slide(carousel)기능구현 vanillajs

 

example

https://aloha-jh.github.io/slide_lib/dist/

 

 

1. 개발목적

기존 slide라이브러리, jQuery의 문제점

• 다른 라이브러리들간의 충돌이 일어난다거나, 라이브러리 별로 호환가능한 jquery버전을 고려해야하는 문제 등이 있다.
• jQuery같은경우 성능을 고려해 만들어진 라이브러리가 아니기 때문에, 여러 jQuery 라이브러리를 사용할경우 속도(퍼포먼스)문제가 발생한다.
• jQuery는 vue에 적용이 불가능하다. 이벤트처리가 서로 충돌되고 객체를 관리하는 방식자체가 다르기 때문이다.

개발 목적

• 자주 사용되는 slider UI 라이브러리를 jquery없이 pure javascript로 제작하여 사용성과 퍼포먼스측면이 향상된 라이브러리를 개발한다.
  

2. 사용방법

사용방법은 chart.js , bxslider ...등 일반 라이브러리 사용법과 같이 선택된 element와 옵션값을 인자값으로 받아 인스턴스화 시켜서 사용한다.  필요에따라 여러개의 인스턴스를 생성해서 사용할수 있도록 제작하도록 한다.

    <div id="slider" class="slider"></div> 
    <div id="slider_second"class="slider"></div> 
  
    <script>
        const el = document.querySelector(`#slider`)
        const slider = new Slider(el, {
             effect:"slider",
             auto: true,
             autoSpeed: 3000,
             speed: .9, 
             nextPrevBtns: "always",
             src:[
                "./images/0.png","./images/1.png"
                ,"./images/2.png","./images/3.png"
                ,"./images/4.png","./images/5.png"
                ,"./images/6.png" 
             ], 
             width: 500,
             height: 300,
        });
        
        const el2 = document.querySelector(`#slider_second`)
        const slider2 = new Slider(el2, {
             effect:"fadeOut",
             auto: false,
             autoSpeed: 1000,
             speed:.6,
             nextPrevBtns: "hoverSlide",
            src:[
                 "./images/3.png","./images/1.png",
                 "./images/2.png","./images/6.png",
                 "./images/4.png","./images/5.png"
            ],
             width: 800, 
        });
    </script>

 

3. 사용자 설정값

name	default	description	optional	type
auto	true	슬라이드 자동으로 전환 여부를 설정한다.	true, false	boolean
autoSpeed	3000	슬라이드가 몇초마다 전환하는지 설정한다.  (단위-ms)	3000, 2000...	number
speed	3	슬라이드가 가로로 넘어갈때 속도를 설정한다.(단위-s)	1~9	number
roundBtns	"move"	라운드버튼 클릭시 해당페이지로 이동할 것인지,  클릭기능 없이 보여주기만 할건지 설정한다.	"move", "readOnly"	string
nextPrevBtns	"always"	이전 다음 버튼을 항상 보이게할건지 마우스 호버시에만 보일건지 설정한다.	"always", "hoverSlide"	string
src *	[]	배너에 보여질 이미지들의 경로 목록(필수입력값)을 입력한다.	["0.png"]	array
width	1200	배너의 가로 넓이(단위px)	100~2000	number
height	450	배너의 세로 넓이(단위px)	100~2000	number
effect	"slider"	슬라이드 전환시 효과를 설정한다.	"slider", "fadeOut"	string
autoHover	false	마우스오버시 슬라이드가 중지된다.	true, false	boolean

 

4. 구조 설계  

markup구조

<div id="slider" class="slider">
    <div class="visual"> 
        <ul class="img-wrap">
            <li class="img-4">4</li>
            <li class="img-1">1</li>
            <li class="img-2">2</li>
            <li class="img-3">3</li> 
        </ul>
            <button class="prev-btn"></button>
            <button class="next-btn"></button>                
            <ul class="round-btns">
                <li class="rbtn-1 active"></li>
                <li class="rbtn-2"></li>
                <li class="rbtn-3"></li>
                <li class="rbtn-4"></li> 
            </ul>
        </div>
    </div>

slide

fadeOut

 

(설명-1)

 

화면상(HTML/CSS)의 구조는 가로로 넘어가는 애니메이션을 구현하기 위해, 사용자가 4개의 이미지를 입력했다고 가정했을때

4개의 슬라이드가 화면에 펼쳐져 있고 (사용자는 그중 하나의 화면만 보이게) 애니메이션으로 넘어가면서 앞의 사진이 맨뒤로 이동하는 구조이다.

이미지는 next 클릭시의 화면 움직임이다.

1)초기에 insertBefore값으로 prev이벤트때를 대비 한다.

2)next 클릭시 맨뒤로 보낸다.

3)사용자의 화면에 1번이 보이게 다시 위치를 맞춘다.

4)trasition으로 애니메이션 효과를 보여준다.

 

 

(설명-2)

 

.up-stage 와 .stage 라는 class 설명 

.fade-out{
  opacity:0 !important;
  transition: all .3s;
}

 

1) 현재 보이는 화면은 up-stage라는 클래스명을 가지고 있다

2) 이동할 화면에게 stage라는 클래스를 준다

3) 현재보이는 화면에 fade-out 클래스를 추가해서 화면에서 사라지게 만든다

 

 

 

내부 함수 구조

default

사용자가 옵션값을 설정 안했을때 기본값으로 사용하게 한다

_

자주 사용되는 간단한 유틸 함수 ex) document.querySelector(  )  같은경우 _.slt( ) 

option

사용자 입력값과 undefined 일경우 기본값으로 완성된 option값들

validation

 사진으로 쓸 경로값 리스트인 src는 필수값으로 설정하여 validation때 체크한다.

process

 1) makeStr 화면에 보여줄 html 생성

 2) roundBtn roundbtn의 스타일 세팅 (append 이런작업끝나고 현재 화면에 addClass active 처리)

 3) styleSet 사용자에게 입력받은 width, height 스타일 설정.

eventSlider

1) next appendChild로 첫번째 자식을 맨뒤로 보내서 순서를 바꾼다  (설명-1)

2) nextEffect 오른쪽에서 왼쪽으로 슬라이드 옮기기

3) prev  insertBefore로 맨뒤자식 맨앞으로 옮겨서 순서를 바꾼다

4) prevEffect 왼쪽에서 오른쪽으로 슬라이드 옮기기

fadeOut

1) fadeOut 이동해야할 image number 값을 받아서 해당 number로 addClass 해서 fadeOut효과를 낸다  (설명-2)

2) next 현재image number에서 +1 한다음 fadeOut 호출

3) prev 현재 image number에서 -1 한다음 fadeOut 호출

4) rBtn 누른번호 event 로 roundbtn className으로 알아내서, 같은번호아니면 , 해당번호로 fadeOut 호출

timer

setInterval 사용해서 nextBtn 클릭하게 설정

init

addEventListner로 만든 이벤트 사용자 option 설정값에 맞춰 적용.

auto 자동넘기기 true 이고 autoHover true 면 mouseenter 시에 clearInterval 적용

readOnly면 click 이벤트 연결안해서 roundbtn 보여지게만 적용.

li첫번째에 active addClass

styleSet실행

option자동넘기기 false면 clearInterval