Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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>

enter image description here


Mikołaj Smoleński staff commented 3 years ago

You have unecessary div wrapper with carousel id. Please remove it, because you have duplicated id="carousel" attributes. Additionaly, you may need to move the three lines with carousel control into the vue mounted lifecycle hook.

Keep coding,  Mikołaj from MDB



Please insert min. 20 characters.

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