Bootstrap-vue: Carousel: add link for image

[kossa]

Hello,

There is a possibility to add link to images in carousel ?

[thanhdd]

@kossa
You can use Slide with image slot of bootstrap vue and add click event for that.

You can try with this code:

<b-carousel-slide>
        <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
             src="https://lorempixel.com/1024/480/technics/5/" alt="image slot" v-on:click="gotoAnyWhere">
</b-carousel-slide>

In the methods you can write gotoAnyWhere method:

methods: {
    gotoAnyWhere () {
      window.location.href = "https://go.to.any.where";
    }
  }
}

[natsuki3]

When <b-carousel-slide> is surrounded with <a>, it can be achieved.

<a href="#">
  <b-carousel-slide caption="First slide"
    text="Nulla vitae elit libero, a pharetra augue mollis interdum."
    img-src="https://lorempixel.com/1024/480/technics/2/">
  </b-carousel-slide>
</a>

[kossa]

Works fine thank you @natsuki3