У меня проблема с совой каруселью, когда я хочу получить мои изображения src от json и добавить их в карусель с помощью руля? - PullRequest
0 голосов
/ 22 декабря 2018

У меня проблема с совой каруселью, когда я хочу использовать руль для генерации изображений и получения их источника из JSON.когда я использую руль, сова-карусель дает отключенный класс элементам div, у которых есть owl-dots и owl-nav class, и в моем слайдере не отображаются точки, а моя предыдущая и следующая кнопки не работают.Можно ли использовать руль для совы-карусели?Это мой код.

<section class="grid-container fluid body-blogShow" style="flex-wrap:nowrap">

   <div class="grid-container ">
    <div class="grid-x">
        <div class="cell ">

            <div class="grid-x blog_items owl-carousel owl-theme">
            <!--****************************-->
                <!--html tags generate by handlebars should generate here-->
            <!--****************************-->


               </script>

            </div>
            <div class="grid-x ">

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

<script id="handlebars-gallery" type="text/x-handlebars-template">

{{#each img}}

<div class="small-12 medium-4 large-2 cell">

 <div class="grid-x grid-padding-x">

     <div class="cell item">

                <a href="">
                    <div class="img_back blog_one" style="background- 
                       image:url('{{this}}')">
                        <div class="title">

                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    {{/each}}

    </script>

 <script type="text/javascript">

   $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
     }
   });

//get data from json and generate it by handlebars


   var template = $("#handlebars-gallery").html();
   var templateScript = Handlebars.compile(template);

  $.ajax({
    type: "GET",
    url: '../../content/Gallery-img/Gallery-img.json',
    success: function (data) {
        //debugger;
        console.log(data);
        //console.log(data.length);
        var context = data;
        var html = templateScript(context);
         $(html).prependTo(".blog_items");
        //$('.blog_items').append(html);

        debugger;
      },
    error: function (er) {
        debugger;
    }
    });
  </script>
...