Я использовал handlebars.js в owlcarousel, первым кодом области элемента был код скрипта - PullRequest
Новая
       12

Я использовал handlebars.js в owlcarousel, первым кодом области элемента был код скрипта

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

Я использовал 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>

1 Ответ

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

вы должны оставить 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>
...