PhotoAlbumPresenter

resources/assets/js/components/presenter/PhotoAlbumPresenter.vue

@@ -6,9 +6,9 @@
 				<p class="font-weight-light">(click to show)</p>
 			</summary>
 			<b-carousel :id="status.id + '-carousel'"
+				v-model="cursor"
 				style="text-shadow: 1px 1px 2px #333;"
 				controls
-				indicators
 				background="#ffffff"
 				:interval="0"
 			>
@@ -17,14 +17,17 @@
 						<img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" :title="img.description">
 					</div>
 				</b-carousel-slide>
+				<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
+					{{cursor + 1}} / {{status.media_attachments.length}}
+				</span>
 			</b-carousel>
 		</details>
 	</div>
 	<div v-else>
 		<b-carousel :id="status.id + '-carousel'"
+			v-model="cursor"
 			style="text-shadow: 1px 1px 2px #333;"
 			controls
-			indicators
 			background="#ffffff"
 			:interval="0"
 		>
@@ -33,12 +36,21 @@
 					<img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" :title="img.description">
 				</div>
 			</b-carousel-slide>
+			<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
+				{{cursor + 1}} / {{status.media_attachments.length}}
+			</span>
 		</b-carousel>
 	</div>
 </template>
 
 <script type="text/javascript">
 	export default {
-		props: ['status']
+		props: ['status'],
+
+		data() {
+			return {
+				cursor: 0
+			}
+		}
 	}
 </script>