创建带有引导带和车把的旋转木马

时间:2019-07-13 23:02:22

标签: javascript bootstrap-4

我正在使用带有把手的引导程序来创建轮播。我从数据库中获取要显示在轮播上的特定项目。

此刻,轮播而不是转到第二张幻灯片,而是跳过它,然后将整个内容从页面中删除。

从我的数据库中带回了2个测试项目。

{ _id: 5d28ad4eec77e8389c56792b,
  slug: '5d28ad4eec77e8389c56792b',
  __v: 1,
  name: 'Test ',
  publishedDate: 2019-07-11T23:00:00.000Z,
  review: 'This was good',
  image: [ 5ce83014af97ea064c5a750d ] },{ _id: 5d29fab5c8a3794a081f65d6,
  slug: 'test2',
  name: 'test2',
  __v: 0,
  publishedDate: 2019-07-12T23:00:00.000Z,
  review: 'fdfsfdsdfsdfdsfsdfs',
  image: [] }

轮播代码

  <div class="container-fluid" id="anchorJump">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">


      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        {{#each testimonials}}
        {{#if @first}}
        <div class="item active">
          <div class="carousel-item active">{{{this.review}}}
            {{else}}
            <div class="carousel-item">{{{this.review}}}
              {{/if}}
              {{/each}}
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

轮播js代码

  $('.carousel').carousel({
    interval: 6000,
    pause: "false",
    wrap:true
  });

1 个答案:

答案 0 :(得分:0)

这就是我的工作方式。我认为问题就在我的评论中提到的循环之中

<script id='wrapper' type='text/x-handlebars-template'>
  <div >
  <!-- Wrapper for slides -->
     <div class="carousel-inner">
       {{#each testimonials}}
       <div class="item {{#if @first }}active {{/if}}">
         <div class="carousel-item {{#if @first }}active {{/if}}">{{this.review}}

           <div class="carousel-item">{{this.review}}


           </div>
         </div>
       </div>
       {{/each}}      
     </div>
     </div>
</script>