Tailwind Carousel Swiper Example

TailwindCarouselSwiper.vue

<template>
  <ReportWithHeader
    :title="getSelectedPlayer ? getSelectedPlayer.name : ' '"
  >
    <div class="h-full w-full relative overflow-x-hidden rounded" id="swiper-section">
      <div class="w-full h-full absolute z-20 flex items-center justify-between">
        <button 
            @click="setPlayer('left')"
            :disabled="selectedPlayerIndex == 0"
            class="rounded-full bg-smoke flex items-center justify-center p-1 text-white">
            <feather type="chevron-left"></feather>
          </button>
        <button 
            @click="setPlayer('right')"
            :disabled="selectedPlayerIndex == team_players.length-1"
            class="rounded-full bg-smoke flex items-center justify-center p-1 text-white">
            <feather type="chevron-right"></feather>
          </button>
      </div>

      <div class="w-full h-full">
        <transition
          mode="out-in"
          enter-active-class="transition ease-out duration-200 transform"
          :enter-class="direction == 'right' ? 'opacity-0 translate-x-full' : 'opacity-0 -translate-x-full'"
          enter-to-class="opacity-100"
          leave-active-class="transition ease-in duration-200 transform"
          leave-class="opacity-100"
          :leave-to-class="direction == 'right' ? 'opacity-0 -translate-x-full' : 'opacity-0 translate-x-full'"
        >
          <PlayerPersonality 
            :team="getTeam" 
            :player="getSelectedPlayer" 
            v-if="getSelectedPlayer"
          ></PlayerPersonality>
        </transition>
      </div>
    </div>
  </ReportWithHeader>
</template>

<script>
import TinyGesture from 'tinygesture'
import PlayerPersonality from './PlayerPersonality'
export default {
  name: 'Report10',
  components: { PlayerPersonality },
  data() {
    return {
      team_players: [],
      selectedPlayerIndex: null,
      direction: 'right',
      tinyGesture: null
    }
  },
  computed: {
    getTeam() {
      return this.$store.getters.getterTeam
    },
    getPlayer() {
      return this.$store.getters.getterPlayer
    },
    getSelectedPlayer() {
      if(!this.team_players.length || this.selectedPlayerIndex == null) return null
      return this.team_players[this.selectedPlayerIndex]
    }
  },
  mounted() {
    this.getTeamPlayers()
    const target = document.getElementById('swiper-section');
    this.tinyGesture = new TinyGesture(target)

    this.tinyGesture.on('panend', () => {
      if(Math.abs(this.tinyGesture.touchMoveX) < 30) return
      if(this.tinyGesture.touchMoveX > 0) {
        this.setPlayer('left')
      } else {
        this.setPlayer('right')
      }
    })
  },
  beforeDestroy() {
    this.tinyGesture.destroy()
  },
  methods: {

    getTeamPlayers() {
      const query = `
        {
          team (
            findBy: { column: "id", value: "${this.getTeam.id}"}
          ) {
            id
            players_project {
              id
              player {
                id
                name
              }
            }
          }
        }
      `
      this.$graphql({ query })
        .then(({ data }) => {
          this.team_players = data.team.players_project.map((item) => item.player)
          this.selectedPlayerIndex = 0
        })
    },

    setPlayer(direction) {

      if(direction == 'left' && this.selectedPlayerIndex == 0 || direction == 'right' && this.team_players.length-1 == this.selectedPlayerIndex) return
      this.direction = direction
      let index
      if(direction == 'left') {
        index = this.selectedPlayerIndex -1
      } else {
        index = this.selectedPlayerIndex +1
      }
      if(this.selectedPlayerIndex == null) return
      setTimeout(() => {
        this.selectedPlayerIndex = null
        setTimeout(() => {
          this.selectedPlayerIndex = index
        },200)
      }, 20)
    },
   
  }

}
</script>