title: Blueimp carousel displays carousel and images below it
body: <p>I have implemented the blueimp carousel (2.22.0) on a gallery page. It works fine and is displaying the images in the carousel. But it is also showing all the images below the carousel in a quasi light box style. This is my code.</p>
  
  <pre><code>&lt;link href="~/Content/Css/blueimp-gallery.min.css" rel="stylesheet" /&gt;
  
  &lt;div class="page-header"&gt;
      &lt;h2&gt;@Model.Name&lt;/h2&gt;
  &lt;/div&gt;
  
  
  &lt;!-- The Gallery as inline carousel, can be positioned anywhere on the page --&gt;
  &lt;div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel"&gt;
      &lt;div class="slides"&gt;&lt;/div&gt;
      &lt;h3 class="title"&gt;&lt;/h3&gt;
      &lt;a class="prev"&gt;‹&lt;/a&gt;
      &lt;a class="next"&gt;›&lt;/a&gt;
      &lt;a class="play-pause"&gt;&lt;/a&gt;
      &lt;ol class="indicator"&gt;&lt;/ol&gt;
  &lt;/div&gt;
  &lt;div id="links"&gt;
  
      @foreach (GalleryViewItemVM item in Model.Images)
      {
          &lt;a href="@item.ImagePath" title=""&gt;
              &lt;img src="@item.ThumbPath" alt=""&gt;
          &lt;/a&gt;
      }
  &lt;/div&gt;
  
  
  &lt;script src="~/Scripts/blueimp-gallery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      blueimp.Gallery(
          document.getElementById('links').getElementsByTagName('a'),
          {
              container: '#blueimp-gallery-carousel',
              carousel: true
          }
  
      );
  &lt;/script&gt;
  </code></pre>
  
  <p>For completeness I am using razor and bootstrap 3 although I don't think this relevant.</p>