Topic: Multi-carousel not working
vtirado.3.3221 free asked 3 years ago
Hi, I´m trying to use a multi-carousel, it works fine if it is outside my Vue component, I need it insede the vue component and it dosen't work. I´m using the multi-carouse via JavaScrip.
I hope you can help me...
<div id="carousel">
<div class="multi-carousel" data-mdb-items="2" id="carousel">
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.jpg"
alt="Gallery image 1"
class="w-100" />
</div>
<div class="multi-carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.jpg"
alt="Gallery image 4"
class="w-100" />
</div>
</div>
<button class="carousel-control-prev"
type="button"
tabindex="0"
data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next"
type="button"
tabindex="0"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</div>
<script>
var vmVueComponent =new Vue({
el:"# vmVueComponent "
});
var carousel = document.getElementById('carousel');
var instance = MultiCarousel.getInstance(carousel);
instance.slideNext();
</Script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 1.0.0-beta6
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Mikołaj Smoleński staff commented 3 years ago
You have unecessary
div
wrapper withcarousel
id. Please remove it, because you have duplicatedid="carousel"
attributes. Additionaly, you may need to move the three lines with carousel control into the vuemounted
lifecycle hook.Keep coding, Mikołaj from MDB