Javascript, CSS: 3D 형태의 Carousel

Bootstrap의 carousel은 순수 슬라이드만 지원한다.

css와 js를 이용하여 커스텀하게 변경하려면 생각보다 폼이 많이들고, 충돌되는 부분이 많기에 다른 라이브러리를 알아봤다.

 

아래와 같은 사항을 염두하여 리서칭 했다.

1. 기존 코드와 충돌이 없을 것 (bootstrap 등)

2. 커스텀이 가능할 것

3. MIT 라이센스일 것

4. 의존성이 없을 것 (jquery 등)

 

니즈와 딱 맞는 라이브러리를 발견했다.

(https://github.com/benkimo6i/vanilla-js-carousel)

 

해당 Repository를 Fork하여 입맛에 맞게 커스텀했다.

(https://github.com/vip00112/vanilla-js-carousel)

 

변경한 내용은 아래와 같다.

1. 기존 코드와 충돌하지 않도록 class 변경 : carousel > carousel3d

2. 불필요한 기능 제거 : 아이템 추가 기능

3. 아이템 사이즈 변경 : 고정 > 반응형

4. 버튼 아이콘 변경

5. carousel 생성 후 버튼과 데이터 변경 기능 추가

6. 현재 아이템 변경 시 Callback 함수 실행

 

 

 

사용법은 아래와 같다.

let carousel;

// 최초 실행
document.addEventListener('DOMContentLoaded', function () {
    var el = document.querySelector('.carousel3d');
    var buttons = ['previous', 'play', 'next'];
    var datas = [
        { 'src': 'https://via.placeholder.com/500x250?text=1' },
        { 'src': 'https://via.placeholder.com/250x500?text=2' },
        { 'src': 'https://via.placeholder.com/250x500?text=3' },
        { 'src': 'https://via.placeholder.com/500x250?text=4' },
        { 'src': 'https://via.placeholder.com/500x250?text=5' },
        { 'src': 'https://via.placeholder.com/250x500?text=6' },
        { 'src': 'https://via.placeholder.com/500x250?text=7' },
        { 'src': 'https://via.placeholder.com/250x500?text=8' },
    ];
    carousel = new Carousel(el, buttons, datas);
    carousel.on('changed', (data) => {
        console.log('onChanged, current data:', data);
        // Do Somethig...
    });
    carousel.mounted();
});

// 데이터 변경
function changeData() {
    var buttons = ['previous', 'next'];
    var datas = [
        { 'src': 'https://via.placeholder.com/500x250?text=1' },
        { 'src': 'https://via.placeholder.com/500x250?text=2' }
    ];
    carousel.setButtons(buttons);
    carousel.setDatas(datas);
    carousel.mounted();
}