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 }" style="display: inline-block;">
      {{slide.name}}
    </div>
    <hr>
    <transition-group name="bounce" tag="div" mode="out-in" style="display:inline-block; width: 100%; height: 300px; overflow: hidden;">
      <div v-for="slide in slides" :key="slide.id" v-show="slide.id === selected.id">
        <div v-for="message in slide.messages" :key="message.id">
          {{message.text}}
        </div>
      </div>
    </transition-group>
  </div>
</div>

CSS

.slider {
  position: relative;
}

.active {
  font-weight: bold;
}

.bounce-enter-active {
  animation: bounce-in 0.3s;
  position: absolute;
}

.bounce-leave-active {
  animation: bounce-in 0.3s reverse;
  position: absolute;
}

@keyframes bounce-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

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',
        messages: [
        	{ id: 1, text: 'Hello World1' },
          { id: 2, text: 'Hello World2' },
        	{ id: 3, text: 'Hello World3' },
          { id: 4, text: 'Hello World4' },
        ]
      }, {
        id: 2,
        name: 'People1',
        image: '//lorempixel.com/400/400/people/1',
        messages: [
        	{ id: 1, text: 'ABCD' },
          { id: 2, text: 'EFGH' },
        	{ id: 3, text: '1234' },
          { id: 4, text: '7891' },
        ]
      }, {
        id: 3,
        name: 'Sports2',
        image: '//lorempixel.com/400/400/sports/2',
        messages: [
        	{ id: 1, text: 'BBBB' },
          { id: 2, text: 'CCCC' },
        	{ id: 3, text: 'DDDD' },
          { id: 4, text: 'EEEE' },
        ]
      }]
    }
  },
  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
      })
    }
  }
})