Vue Slider

 

ImageSliderCompoenet 를 만들어서 자유로운  사이즈, 이미지량, 속도를 커스텀할수 있도록 만들어봤다. 

Vue 독학이라 쉽진 않네요~

<template>
  <div >
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList1 :p-height-data="400" :p-width-data="400" :p-trans-data="-400"  :b-check-horiz=false :p-second="0.5"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList2 :p-height-data="200" :p-width-data="200" :p-trans-data="200" :b-check-horiz=false :p-second="5"></ImageSliderComponent>
    </div>
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList3 :p-height-data="100" :p-width-data="100" :p-trans-data="-100" :b-check-horiz=true :p-second="2"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList4 :p-height-data="100" :p-width-data="100" :p-trans-data="100" :b-check-horiz=true :p-second="4"></ImageSliderComponent>
    </div>
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList5 :p-height-data="200" :p-width-data="200" :p-trans-data="-200" :b-check-horiz=false :p-second="1.25"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList6 :p-height-data="200" :p-width-data="200" :p-trans-data="200" :b-check-horiz=true :p-second="8"></ImageSliderComponent>
    </div>
  </div>
</template>

<script>
import ImageSliderComponent from "../mainComponents/ImageSliderComponent";
export default {
  name: "Tester",
  components: {ImageSliderComponent},
  data () {
    return {
      imgList1: [
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.etsystatic.com/8800859/r/il/80b642/1645517321/il_570xN.1645517321_cbxw.jpg',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrHbY4UAdm3s05D7ZqTIJHl1B1SmND4HEd3VeoiuzR7fAaClmA_NGN4DL7upgjVjai8lE&usqp=CAU',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000',
        'https://i.icanvas.com/list-square/akitas.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
      ],
      imgList2: [
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0i9I6AMEZ9jjN0beTqDk_XOyjWzgFISZXCBvd5Va-WkDvkTXHs9fOYmKGy6AGCO7ci_Y&usqp=CAU',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.pinimg.com/originals/d5/b2/02/d5b202e34b196e430d737b713a2164de.jpg',
      ],
      imgList3: [
        'https://images.fineartamerica.com/images-medium-large-5/colorful-dog-art-heart-and-soul-by-sharon-cummings-sharon-cummings.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://i.pinimg.com/originals/66/9d/c1/669dc1fbb3100a780fbc2a1eb65f06d5.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/1-colorful-long-haired-cat-art-peggy-collins.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList4: [
        'https://i.pinimg.com/originals/fb/55/24/fb55244036ea68a2e511dd86917582f5.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList5: [
        'https://static.vecteezy.com/system/resources/previews/002/492/339/original/abstract-cat-pet-portrait-painting-vector.jpg',
        'https://royalthaiart.com/wp-content/uploads/2022/02/Dog-Painting.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://i.etsystatic.com/8800859/r/il/918819/1903524852/il_570xN.1903524852_ruxb.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList6: [
        'https://cdn.shopify.com/s/files/1/0017/7461/6627/products/abstract-cat-diamond-art-painting-30603514708161_2048x2048.jpg?v=1631438728',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.ebayimg.com/images/g/RHsAAOSwIvRgIbe0/s-l500.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
    }
  }
}
</script>

<style scoped>

</style>