🖼️ 04. 이미지 갤러리

📝 구현 코드

JavaScript (페이드 효과)

var gallerySwiper = new Swiper(".gallery", {
    effect: "fade",           // 페이드 효과
    fadeEffect: {
        crossFade: true
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 4000,          // 4초마다 자동 전환
        disableOnInteraction: false,
    },
    loop: true,               // 무한 루프
});

다른 효과들

// 큐브 효과
effect: "cube",
cubeEffect: {
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94,
},

// 플립 효과
effect: "flip",
flipEffect: {
    slideShadows: false,
},

// 커버플로우 효과
effect: "coverflow",
coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
},