JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="app">
  <div class="slider">
    <div v-for="slide in slides" :key="slide.id" @click="select(slide)" :class="{ active: slide.id === selected.id }">
      {{slide.name}}
    </div>
    <hr>
    <transition-group name="fade" tag="div" mode="out-in" style="display:inline-block;">
      <img :src="slide.image" v-for="slide in slides" :key="slide.id" v-show="slide.id === selected.id">
    </transition-group>
    <div>
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</div>

CSS

.active {
  font-weight: bold;
}

.fade-transition {
  transition: all 0.8s ease;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  position: absolute;
}

.fade-enter-active, .fade-leave-active {
  transition: transform .5s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(0);
}

JavaScript

new Vue({
  el: '#app',
  created: function() {
    this.selected = this.slides[0]
  },
  data: function() {
    return {
      selected: null,
      slides: [{
        id: 1,
        name: 'Sports1',
        image: '//lorempixel.com/400/400/sports/1',
        message: 'ABCD'
      }, {
        id: 2,
        name: 'People1',
        image: '//lorempixel.com/400/400/people/1',
        message: 'EFGH'
      }, {
        id: 3,
        name: 'Sports2',
        image: '//lorempixel.com/400/400/sports/2',
        message: 'EFGH'
      }, {
        id: 4,
        name: 'Sports3',
        image: '//lorempixel.com/400/400/sports/3',
        message: 'EFGH'
      }, {
        id: 5,
        name: 'Sports4',
        image: '//lorempixel.com/400/400/people/4',
        message: 'EFGH'
      }]
    }
  },
  methods: {
    select: function(slide) {
      this.selected = slide
    },
    prev: function() {
      var currentIndex = this.getCurrentIndex()
      var prevIndex = currentIndex === 0 ? this.slides.length - 1 : currentIndex - 1
      this.selected = this.slides[prevIndex]
    },
    next: function() {
      var currentIndex = this.getCurrentIndex()
      var nextIndex = currentIndex === this.slides.length - 1 ? 0 : currentIndex + 1
      this.selected = this.slides[nextIndex]
    },
    getCurrentIndex: function() {
      var id = this.selected.id
      return this.slides.findIndex(function(slide) {
        return slide.id === id
      })
    }
  }
})