Question

我正在为学校项目建立一个网站，但我的猫头鹰旋转木马滑块不起作用。有人可以帮助我，因为我不明白为什么它不起作用。我试过阅读文档，但它对我没有帮助。

我想创建一个Owl Carousel的实例，但是虽然我按照说明操作，但是不同的div只是放在彼此之下。我知道这可能有点模糊，但我不知道该怎么做。

谢谢！

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="owl-carousel/owl.carousel.css" type="text/css">
<link href="owl-carousel/owl.theme.css" type="text/css">
<link href="owl-carousel/owl.transitions.css" type="text/css">

<div class="col-md-8 col-md-offset-1">
    <div id="owl-demo" class="owl-carousel owl-theme">
        <div class="item">
            <p class="broodtekst">Hét event van de bedrijfsfilm in Vlaanderen gaat in deze <strong>16e editie</strong> over de taalgrens heen. <br /> Dit jaar organiseren we het  festival in Brussel en dingen naast Vlaamse nu ook Brusselse en Waalse bedrijven mee naar de prestigieuze video awards. <br />
            Het festival zal ingeleid worden met een beurs en allerlei gastsprekers.</p>
        </div>
        <div class="item">
            <p class="broodtekst">L’evenement du film d’enterprise en flandre changera d’un evenement regional à un evenement national. Depuis cette année on organisera le festival à Kinepolis Bruxelles et l’ont aussi des entreprises bruxellois et wallon l’opportunité de concourir pour ces prix prestigieuses.</p>
        </div>
        <div class="item">
            <img src="img/groepsfoto.png" alt="The Last of Us" />
        </div>
    </div>
</div>

<script src="js/jquery-1.9.1.min.js"></script>    
<script src="owl-carousel/owl.carousel.js"></script>     
<script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({

        navigation : true,
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem : true

        // "singleItem:true" is a shortcut for:
        // items : 1, 
        // itemsDesktop : false,
        // itemsDesktopSmall : false,
        // itemsTablet: false,
        // itemsMobile : false

      });
    });
</script>   `

<!-- Hier komt de JQuery -->

<script type="text/javascript" src="js/bootstrap.min.js"></script>

我把它放在JsFiddle上，但它似乎也没有在那里工作。

您还可以访问以下网站：http://cvf.kiran.be

Answer 1

我刚刚调整了你的Fiddle。猫头鹰滑块现在正在工作，唯一的调整是改变

<div id="#owl-demo" class="owl-carousel owl-theme">

到

<div id="owl-demo" class="owl-carousel owl-theme">

如果您不知道 - id-attribute的值只写为value并由jQuery使用#作为id属性的快捷方式引用。简化：jQuery选择器$("#value")与javascript选择器document.geElementById("value")相同供参考：http://api.jquery.com/id-selector/

Jquery OWL旋转木马似乎不起作用，div被放在彼此之下

1 个答案: