JSFiddle - React, Tailwind, and code Playground

by StpFlp_DDK

HTML

<div id="app">
  <Carousel :items="items" />
</div>


<template id="carousel">
  <div>
    <div v-for="(item, index) in photos" :key="index">
      <div @click="imgClick(item)" style="cursor:pointer;">
        <img :src="item.thumbnail" />
      </div>
      <Modal v-if='item.show' @close="item.show = false">
        <div slot='body'>
          <img :src="item.thumbnail" :class="`img-index--${index}`"/>
        </div>        
      </Modal>
    </div>
  </div>
</template>


<template id="modal">
  <div class="modal">
    <div class="close" @click="close">&times;</div>
    <div class="body">
      <slot name='body' />
    </div>
  </div>  
</template>

CSS

.modal {
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: 50px;
}

.modal .body {
  background-color: #fff;
}
.modal .close {
  right: 5px;
  position: relative;
  font-size: 30px;
  text-align: right;
  top: 30px;
  cursor: pointer;
}

Vue

Vue.component('Modal', {
	template: "#modal",
  methods: {
  	close() {
    	this.$emit('close')
    }
  }
})

Vue.component('Carousel', {
	template: "#carousel",
  props: {
  	items: { type: Array, default:() => [] }
  },
  data() {
  	return {
    	photos: {}
    }
  },
  created() {
  	this.photos = this.items.map(item => {
    	return { ...item, show: false }
    })
  },
  methods: {
  	imgClick(item) {
			item.show = true
    }
  }
})

new Vue({
  el: "#app",
  data: {
    items: [
      { thumbnail: 'http://dummyimage.com/200x150/ccc' },
      { thumbnail: 'http://dummyimage.com/200x150/449955' },
      { thumbnail: 'http://dummyimage.com/200x150/444564/' },
      { thumbnail: 'http://dummyimage.com/200x150/FF4455' },
    ]
  }
})