Vue TweenMax Slider Gallery

Nuxt

Vue

TweenMax( gsap )

데모보기

- index.vue

<template>

<section class="container">

<div>

<Slide/>

</div>

</section>

</template>

<script>

import Slide from '~/components/slide/Slide.vue'

export default {

components: {

Slide

}

}

</script>

<style lang="scss">

</style>

- Slide.vue

<template>

<div class="slide">

<div class="list">

<ul>

<li v-for="( item, index ) in list" :style="item" :key="index">

<SlideItem :num='index' :setData='item' />

</li>

</ul>

</div>

<div class="controller">

<button @click="showPrev">이전</button>

<button @click="showNext">다음</button>

</div>

</div>

</template>

<script>

import SlideItem from "@/components/slide/SlideItem";

import { TweenMax, Expo } from "gsap";

export default {

components : {

SlideItem

},

data(){

return{

index : 0,

prevIndex : 0,

isShow : false,

list : [

{ left : "0px", backgroundColor : '#ff0000' },

{ left : "500px", backgroundColor : '#ffff00' },

{ left : "500px", backgroundColor : '#000000' },

{ left : "500px", backgroundColor : '#0000ff' }

]

}

},

methods : {

showPrev()

{

if( this.isShow ) return;

this.isShow = true;

this.index--;

if( this.index < 0 ) this.index = this.list.length - 1;

let item = this.list[ this.index ];

TweenMax.set( item, { left : "-500px" });

TweenMax.to( item, 0.5, { left : "0px", ease:Expo.easeInOut });

let prev = this.list[ this.prevIndex ];

TweenMax.set( prev, { left:"0px" });

TweenMax.to( prev, 0.5, { left : "500px", ease:Expo.easeInOut, onComplete:() =>{

this.isShow = false;

}});

this.prevIndex = this.index;

},

showNext()

{

if( this.isShow ) return;

this.isShow = true;

this.index++;

if( this.index > this.list.length - 1 ) this.index = 0;

let item = this.list[ this.index ];

TweenMax.set( item, { left : "500px" });

TweenMax.to( item, 0.5, { left : "0px", ease:Expo.easeInOut });

let prev = this.list[ this.prevIndex ];

TweenMax.set( prev, { left:"0px" });

TweenMax.to( prev, 0.5, { left : "-500px", ease:Expo.easeInOut, onComplete:() =>{

this.isShow = false;

}});

this.prevIndex = this.index;

}

}

}

</script>

<style lang="scss" scoped>

.slide{ width: 500px; margin: 0 auto;

.list{ width: 500px; height: 500px; margin-bottom: 10px; overflow: hidden;

ul{ position: relative;

li{ width: 500px; height: 500px; position: absolute; border: 1px solid black; }

}

}

.controller{ text-align: center;

button{ width: 200px; height: 50px; }

}

}

</style>

- SlideItem.vue

<template>

<div :style="setData" class="slide_item">

{{ num + "번째" }}

</div>

</template>

<script>

export default {

props : {

setData : Object,

num : Number

}

}

</script>

<style lang="scss" scoped>

.slide_item{ width: 100%; height: 100%; font-size: 100px; color: #fff; text-align: center; }

</style>