Carousel Navigation - Help

Hello ı have been trying to navigate carousel from outside of .carousel-indicatiors.

since in bootstraps code i can make it with defining “data-to-slide” atr.

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li>

I couldnt make it work for bootstrap-vue. i tried to define all aria labels on extrenal <li aria-*> but no navigation happening.

I have a seperate/secondary navigation on my page apart from carousel but needs to navigate carousel slider too.

This navigation outside of the div of #carousel and have to navigate carousel slides as indicators.

I am using bundler, tried vue-webpack-simple and advanced so far for compat. issues bu no help so far.

[tmorehouse]

Try this:

this.$refs.myCarousel.index = n or @click="$refs.myCarousel.index = n"

where n is the slide you want to go to.

Note if the carousel is in the middle sliding when you specify the new index, it will not slide to that slide.

[tmorehouse]

The aria labels are for labelling the controls for sight impaired users that are using a screen reader to describe the page layout and controls.

Bootstrap-Vue components do not look outside of their own DOM section, and hence do not look for any of the bootstrap V4 jQuery data-* interface (i.e. data-target, data-slide-to, data-toggle, etc.).

Currently carousel doesn’t provide a v-model binding for setting the current slide.

You can get around this and control the next and previous side by setting a ref="myCarousel" attribute on <b-carousel ref="mycarousel"> and then calling the next() and previous() methods on that ref:

// Goto next slide
 this.$refs.myCarousel.next();
// Goto previous slide
 this.$refs.myCarousel.prev();

I have created a PR to add support for controlling the slide number via a v-model binding.