Currently, I am utilizing a slider component known as Hooper. It's all functioning smoothly - of course, I've created a separate component for it because I prefer not to have it included in my global app at all times.
<template>
<hooper :infiniteScroll="true">
<slide v-for="(image, index) in images" :style=" { backgroundImage: 'url(\'img/' + image + '\')' }" :key="index">dsadasd</slide>
</hooper>
</template>
<script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
props: [
'images'
],
name: 'Hooper',
components: {
'hooper': Hooper,
'slide': Slide
}
};
</script>
In order to use this component, I need to add it to my blade file like so:
@extends('layouts.app')
@section('content')
<carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel"></carousel>
<div class="container">
<h1 class="p-4 text-lg font-sans">Home</h1>
</div>
@endsection
A Dilemma
My aim is to be able to insert any HTML content into each slide and also specify the image name. Ideally, within my blade file, it would look like this:
@extends('layouts.app')
@section('content')
<carousel class="carousel">
<slide :style=" { backgroundImage: 'url(\'img/image-1.jpg\')' }">
<h3>header text</h3>
<p>dsadasfhshshsgfgas</p>
</slide>
<slide :style=" { backgroundImage: 'url(\'img/image-2.jpg\')' }">
<h3>header text 2</h3>
<p>dsadasdsdsadsafhshshsgfgas</p>
</slide>
</carousel>
<div class="container">
<h1 class="p-4 text-lg font-sans">Home</h1>
</div>
@endsection
Unfortunately, slide is not recognized as a registered component. How can I address this issue?
An Alternate Approach
I had an idea where I could create a slot for each loop within my component and then override that slot in the blade file, like this:
Carousel.vue
<template>
<hooper :infiniteScroll="true" class="carousel">
<slide v-for="(image, index) in images" :style=" { backgroundImage: 'url(\'img/' + image + '\')' }" :key="index">
<slot :name="'slide' + index"></slot>
</slide>
</hooper>
</template>
<script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
props: [
'images'
],
name: 'Hooper',
components: {
'hooper': Hooper,
'slide': Slide
}
};
</script>
home.blade.php
<carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel">
<template v-slot="slide1">
<h2>dsdasdadas</h2>
<p>dsdadasdasds</p>
</template>
</carousel>
However, this method doesn't seem to be working as expected. Any suggestions on how to fix this? Thanks!