Full-Stack Vue.js 2 and Laravel 5

Image carousel

Let's build a new feature for the Vuebnb frontend app using components. As you'll recall from previous chapters, each of our mock data listings has four different images, and we're passing the URLs to the frontend app.

To allow the user to peruse these images, we're going to create an image carousel. This carousel will replace the static image that currently occupies the modal window that pops up when you click the header of a listing.

Begin by opening the app view. Remove the static image and replace it with a custom HTML element image-carousel.

resources/views/app.blade.php:

<div class="modal-content">
  <image-carousel></image-carousel>
</div>

A component can be referred to in your code by a kebab-case name such as my-component ...