Add title and description to slides

[JohanaG3]

Hey, how can i add a title and description to my slides?

[ragnarlotus]

Hello, there is a complement for that called caption. You can check [caption's documentation to know how to use it, but the title and description should be in the same place.

If you really need them for example in title at top and description at bottom I can make a small release adding a slot allowing you to do it.

Regards

[JohanaG3]

Yes, i need to put the description at the middle with a specific style!. very appreciate your help. thanks. I used the caption complement but only allows me put the title.

[ragnarlotus]

No problem :)

I will create a new version with another slot this week.

[ragnarlotus]

Really sorry for the delay.

Just release 6.3.0 which has the description slot. It is located at bottom by default.

Let me know if you have any problem.

Regards!

[JohanaG3]

Very thankful! ... I write my code in this way: Please check out because doesn't work for me yet.
`

    <template v-slot:caption>
        <flux-caption class=" flux-caption w-full h-full absolute bg-black opacity-50" v-slot="captionProps">
          
        <h1 class="text-center py-10 text-bold text-4xl">
          {{ captionProps.text }} </h1>
    
      
        </flux-caption>
      
    </template>
    <template v-slot:description>
        <flux-description v-slot="descriptionProps">         
          <p class="text-center py-10 text-semibold text-2xl">{{ descriptionProps.text }} </p>
        </flux-description>
      
    </template>

    <template v-slot:controls>
        <flux-controls />
    </template>
</vue-flux>

` `<script> import { VueFlux, FluxCaption, FluxControls, FluxDescription,

} from 'vue-flux';

export default {
components: {
VueFlux,
FluxCaption,
FluxControls,
FluxDescription,

},

data: () => ({
images: [
("images/slides/slide1.jpg"),
("images/slides/slide2.jpg"),
("images/slides/slide3.jpg"),
("images/slides/slide4.jpg"),
("images/slides/slide5.jpg")
],

vfOptions: {
    autoplay: false,
     delay: 5000,
            
  },
transitions: [
  'swipe',
  'kenburn',

],
captions: [
{
text: 'NETWORKING',
},
{

    text: 'IOT',
  },
  {

    text: 'APPS',
  },
    {

    text: 'COMPUTER SUPPORT',
  },
    {

    text: 'STREAMING SETTING',
  },

],
Descriptions: [
{

  text: 'loremn hjz jdhfjhsfd',
},
{

  text: 'loremn hjz jdhfjhsfd',
},
{

  text: 'loremn hjz jdhfjhsfd',
},
  {

  text: 'loremn hjz jdhfjhsfd',
},
  {

  text: 'loremn hjz jdhfjhsfd',
},

],
}),
}
</script>`

[ragnarlotus]

It's normal that it does not work, I just added a slot, not a component nor descriptions attribute, so you will need to create you own component and pass the descriptions to it, making it display the corresponding description based on the current image.

You can just copy the FluxCaption component and tune it to achieve what you want.

In next major version, which I'm preparing will be much easier, but I still need some more months to finish it.

Try to do it the way I said and let me know if you get stuck, I will try to help you.

Regards!