슬라이드 이팩트

소스 보기

Javascript

gsap

jquery

// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");       //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner ")    //움직이는 영역;
const slider = sliderWrap.querySelectorAll(".slider");               // 개별 이미지

// 변수 설정
let currentIndex = 0;               // 현재 보이는 이미지
let sliderCount = slider.length;    // 이미지 갯수
let sliderInterval = 3000;           // 이미지 변경 간격 시간

// javascript
sliderInner.style.transition = "all 0.6s";
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;
        sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
    }, sliderInterval);

// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");       //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner ")    //움직이는 영역;
const slider = sliderWrap.querySelectorAll(".slider");               // 개별 이미지

// 변수 설정
let currentIndex = 0;               // 현재 보이는 이미지
let sliderCount = slider.length;    // 이미지 갯수
let sliderInterval = 3000;           // 이미지 변경 간격 시간

//gsap
setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

    gsap.to(sliderInner, {
        x: -800 * currentIndex,
        duration: 1,
        ease: "power4.out"
    }) 
}, sliderInterval);

// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");       //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner ")    //움직이는 영역;
const slider = sliderWrap.querySelectorAll(".slider");               // 개별 이미지

// 변수 설정
let currentIndex = 0;               // 현재 보이는 이미지
let sliderCount = slider.length;    // 이미지 갯수
let sliderInterval = 3000;           // 이미지 변경 간격 시간
    
//jquery
setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({left: -800 * currentIndex}, 600, "easeOutElastic");

}, sliderInterval);