markdown VUE-RE-carousels2

Posted 2021-05-05

<div id="jsApp--carousels" class="Content">
  <div class="outer">
    <my-component
        :carousels="carousels" 
        ref="carouselParent" 
        @pre_btn="main(false)" 
        @next_btn="main(true)"
        @test="main"
        v-slide_stop="stop" 
        v-slide_start="start">
    </my-component>
  </div>
</div>

const myComponent = Vue.component ('my-component',{
  props: {
    carousels: { type: Array, default: []},
  },
  template: `
<div class="inner">

  <!--カルーセル本体-->
  <ul ref="carousel" class="carousel">
    <li class="item" v-for="(carousel, index) in carousels">
      <figure :data-mainImageKey="index + 1" 
   :style="{backgroundImage: 'url(' + carousel.img.src + ')'}">
      </figure>
    </li>
  </ul>

  <!--pre next button-->
  <div class="nextprev flex flex-justify-sb">
    <a class="prev--btn d-ib" @click="$emit('pre_btn')">前へ</a>
    <a class="next--btn d-ib" @click="$emit('next_btn')">次へ</a>
  </div>

  <!--サムネイル-->
  <ul class="thumb flex flex-justify-c align-center">
    <li class="item" v-for="(carousel, index) in carousels">
      <a class="prev--btn d-ib" @click="$emit('test', index + 1)">
        <figure :data-subImageKey="index + 1">
          <img :src="carousel.img.src" :alt="carousel.caption">
        </figure>
      </a>
    </li>
  </ul>

</div>
  `
})

Vue.directive ('slide_stop',{
  inserted: function(el, binding, evt) {
    let stop = function(el) {
      binding.value(el, evt)
    }
    el.addEventListener('mouseover', stop)
  }
})

Vue.directive ('slide_start',{
  inserted: function(el, binding, evt) {
    let start = function(el) {
      binding.value(el, evt)
    }
    el.addEventListener('mouseout', start)
  }
})

new Vue ({
  el: '#jsApp--carousels',
  components: { myComponent },
  data() {
    return {
      carousels: [
        {
          img: {
            src: 'https://via.placeholder.com/1920x1080/27709b/ffffff?text=1',
            caption: 'aaaa'
          }
        },
        {
          img: {
            src: 'https://via.placeholder.com/1920x1080/27709b/ffffff?text=2',
            caption: 'aaaa'
          }
        },
        {
          img: {
            src: 'https://via.placeholder.com/1920x1080/27709b/ffffff?text=3',
            caption: 'aaaa'
          }
        },
        {
          img: {
            src: 'https://via.placeholder.com/1920x1080/27709b/ffffff?text=4',
            caption: 'aaaa'
          }
        },
        {
          img: {
            src: 'https://via.placeholder.com/1920x1080/27709b/ffffff?text=5',
            caption: 'aaaa'
          }
        },
        {
          img: {
            src: 'https://via.placeholder.com/1920x1080/27709b/ffffff?text=6',
            caption: 'aaaa'
          }
        },
        {
          img: {
            src: 'https://via.placeholder.com/1920x1080/27709b/ffffff?text=7',
            caption: 'aaaa'
          }
        },
      ],
      focusNum: 0, //現在のフォーカスイメージ
      effectOrder: -1, //-1:左方向 1:右方向
      slideControl: null, //止めたり再度スタートしたり
    }
  },
  created() {
    
  },
  computed: {
    startForcusNum() {
      return Math.round(this.carousels.length / 2)
    },
  },
  created() {
    this.focusNum = this.startForcusNum
    //console.log(this.focusNum)
  },
  methods: {
    test(index) {
      //console.log(this.windowInnerWidth)
      //console.log(this.$el)
      //console.log(this.imgWidthAll)
      //console.log(this.$refs.carouselParent.$refs.carousel)
      console.log(index)
    },

    main(position) {
      let check_position = position => {
        let a = position

        if(a > this.carousels.length) {
          a = 1      
        }
        if(a < 1) {
          a = this.carousels.length
        }
        return a
      }
      
      
      if(typeof position === 'number') {
        this.focusNum = position
      } else {
        if(this.effectOrder === 1) {
          position === true ? this.focusNum++ : this.focusNum-- 
        } else {
          position === true ? this.focusNum-- : this.focusNum++
        }
        this.focusNum = check_position(this.focusNum)
      }

      let main_dom = []
      let sub_dom = []
      for(let i = 1; i <= this.carousels.length; i++) {
        //console.log(i)
        
        main_dom[i] = document.querySelector(`figure[data-mainImageKey="${i}"]`)
        sub_dom[i] = document.querySelector(`figure[data-subImageKey="${i}"]`)
        
        main_dom[i].classList.remove('now')
        sub_dom[i].classList.remove('now')
        
        if(i === this.focusNum) {
          main_dom[i].classList.add('now')
          sub_dom[i].classList.add('now')  
        } 
      }
    },
    start() {
      this.slideControl = setInterval(this.main,2000)
      console.log("start")
    },
    stop() {
      clearInterval(this.slideControl)
      console.log("stop")
    },
  },
  mounted() {
    //this.test()
    //setInterval(this.windowCentering, 100)
    this.slideControl = setInterval(this.main,2000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

/*==========================================================
Main
===========================================================*/
#jsApp--carousels {
  .inner {
    position: relative;
  }
}
.carousel {
  height: 90vh;
}
.carousel figure {
  //width: 105%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  //left: 5%;
  height: 90vh;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 0.5s;
  &.now {
    border: #fff 1px solid;
    left: 0;
    opacity: 1;
    z-index: 50;
  }
}

.thumb {
  position: absolute;
  bottom: -20px;
  right: 20px;
  z-index: 100;
}
.thumb figure {
  width: 100px;
}

.nextprev {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  z-index: 1000;
  //margin-top: 1500px;

}

.now {
  border: #fff 1px solid;
  opacity: 0.9;
  z-index: 500;
}

<link href="https://codepen.io/kote2kote/pen/xBKqMP.css" rel="stylesheet" />

vue-re-carousels2
-----------------


A [Pen](https://codepen.io/kote2kote/pen/moPRyX) by [kote2](https://codepen.io/kote2kote) on [CodePen](https://codepen.io).

[License](https://codepen.io/kote2kote/pen/moPRyX/license).