Question

我将handlers.js用于猫头鹰传送带。幻灯片正常工作。但是，第一项区域没有图像曝光。

handlers.js代码在第一个区域中显示。

我尝试.remove（）删除第一项

http://www.bentic.xyz/study/ （这是某些问题的URL。）

<head>
<link rel="stylesheet" href="OwlCarousel2-2.3.4/docs/assets/owlcarousel/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="OwlCarousel2-2.3.4/docs/assets/owlcarousel/assets/owl.theme.default.min.css">
  <script src="../jquery/jquery-3.3.1.min.js"></script>
  <script src="./js/handlebars-v4.1.2.js"></script>
  <script src="OwlCarousel2-2.3.4/docs/assets/owlcarousel/owl.carousel.min.js"></script>
<head>

<div class="owl-carousel owl-theme mybanner">
    <script id="banner-template" type="text/x-handlebars-template">
      {{#banner}}
      <div class="item">
        <img src="{{images}}">
      </div>
      {{/banner}}
    </script>
  </div>

<script>
$(document).ready(function() {
      setTimeout(function(){
        $('.owl-carousel').owlCarousel({
          autoPlay:5000,
          loop: true,
          margin: 10,
          nav: true,
          navText : ["<img src='left.png' />","<img src='right.png' />"],
          items: 1,
          autoplay:true,
          autoplayTimeout:3000,
          autoplayHoverPause:true
        })
      });
      },300);
    var source = $("#banner-template").html();
    var template = Handlebars.compile(source);

    var data = {
      banner:[
        {images : "./img/1.png"},
        {images : "./img/2.png"},
        {images : "./img/3.png"}
      ]
    };
    var html = template(data);
    $('.mybanner').append(html);
</script>

Answer 1

您应该将轮播的div留空，将脚本移到其下方，它应该可以工作

<div class="owl-carousel owl-theme mybanner">

</div>
<script id="banner-template" type="text/x-handlebars-template">
{{#banner}}
<div class="item">
<img src="{{images}}">
</div>
{{/banner}}
</script>

我在owlcarousel中使用handlebars.js，第一个区域代码是脚本代码

1 个答案: