Now that we know how the gallery component will be consumed, we can start to build it. Create a new ClientApp/components/product/Gallery.vue component and add a template section like this:
<template> <div class="gallery" @click="close"> <span @click.stop="prev"> <i class="fas fa-chevron-circle-left fa-3x prev" /> </span> <div class="slide" @click.stop="next"> <transition name="fade" mode="out-in"> <img class="img-fluid" :src="images[index]" :key="images[index]" :alt="images[index]" /> </transition> </div> <span @click.stop="next"> <i class="fas fa-chevron-circle-right fa-3x next" /> </span> </div></template>
First, we declare a wrapping div element, which we will style with CSS to cover the entire screen ...
