Carousel Navigation - Help
See original GitHub issueHello ı 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.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:8 (6 by maintainers)
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.
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 thenext()
andprevious()
methods on that ref:I have created a PR to add support for controlling the slide number via a
v-model
binding.