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

Question

我将 handlers.js 用于 owlcarousel。幻灯片工作正常。但是，第一项区域没有显示图像。

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第一项区域代码是脚本代码

I used handlebars.js in owlcarousel the first item area code was script code

javascript

jquery

handlebars.js

owl-carousel