Карусель не работает в Vue JS, но работает в простом PHP-файле - PullRequest
Новая
       16

Карусель не работает в Vue JS, но работает в простом PHP-файле

0 голосов
/ 22 мая 2019

Я использую owl.carousel в моем приложении Vue. Но карусель не появляется на странице. Я включил (owl.carousel.min.css) и другие соответствующие файлы (jquery, bootstrap) внутри моего index.html. Эти файлы также можно увидеть на вкладке сети браузера, что означает, что файлы загружаются, но карусель (или изображения) не видны. Когда я удаляю owl.carousel.min.css из индекса, он отображает изображения, используемые внутри карусели, поверх одного из них. другой, но без карусели. Любая идея, в чем может быть проблема .. ?? Спасибо. 

       <div class="banner-slider">
        <div class="container">
            <div class="row">
                <div class="carousel-wrap">
                    <div id="sync2" class="navigation-thumbs owl- 
                       carousel">
                        <div class="item">
                            <img src="./images/bslide4.png">
                            <div class="details">
                                <p>Alex</p>
                                <small>Guitarist</small>
                            </div>
                        </div>
                        <div class="item">
                            <img src="./images/bslide1.png">
                            <div class="details">
                                <p>MIRA</p>
                                <small>Filmmaking</small>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
      </div>

И 

    var sync1 = $(".slider");
    var sync2 = $(".navigation-thumbs");

    var thumbnailItemClass = '.owl-item';
    var slides = sync1.owlCarousel({
    video:true,
    startPosition: 3,
    items:1,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayHoverPause:false,
    nav: false,
    dots: true,
    responsive: {
        0: {
            items: 1,
            loop:true
        },
        600: {
            items: 1,
            loop:true
        },
        1000: {
            items: 1,
            loop:true
        }
    }
  }).on('changed.owl.carousel', syncPosition);
...