Как добавить разбивку на страницы в фотогалерею?

Question

Мой HTML код выглядит так:

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

      </div> 
      <div class="modal-body"> 


      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Мой Javascript код выглядит так:

htmlData = ''; 
    htmlData = 'Photos<a href="#" id="hotel_photo" data-hotel-code="nases">(Click to View)</a><br><br>'; 
    htmlData += '<div class="imageHotel"></div>'; 

    $('#myModal').find('.modal-body').html(htmlData); 

    $(".imageHotel").hide(); 
    $(document).on("click", "#hotel_photo", function(event){ 
     $(".imageHotel").toggle(); 
     event.preventDefault(); 
     htmlData += '<div id="gallery_hotel">'; 

      htmlData = '<img id="largeImage" src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg" />'; 

     htmlData += '</div>'; 


     htmlData += '<div id="thumbs_hotel">'; 

      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />'; 

     htmlData += '</div>'; 

     $('.imageHotel').html(htmlData); 

     // bind the click event 
     $('#thumbs_hotel').off().on('click', 'img', function() { 
      console.log($(this).attr('src')); 
      $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
     }); 

    }); 

Demo как это: https://jsfiddle.net/oscar11/10td0yww/5/

Я хочу, чтобы добавить нумерацию страниц в моей фотогалерее. Таким образом, изображения показывают только 5 изображений на страницу. например, есть 10 снимков, тогда будет 2 страницы

Любое решение для решения моей проблемы?

Большое спасибо

Answer 1

Я использовал сову карусель для этого.

$("#thumbs_hotel").owlCarousel({ 
    items: 5, // number of images to be moved 
    dots: true 
}); 

Я предотвратил салфетки/сенсорный/перетащить событие для совы каруселью, добавив следующий код:

$(".item").on("touchstart mousedown", function(e) { 
    // Prevent carousel swipe 
    e.stopPropagation(); 
}) 

Также я добавил CSS для навигации точек. Вы можете изменить его в соответствии с требованиями.

.owl-carousel .item { 
    margin: 3px; 
} 
.owl-dot { 
    display: inline-block; 
} 
.owl-dots span { 
    background: none repeat scroll 0 0 #869791; 
    border-radius: 20px; 
    display: block; 
    height: 12px; 
    margin: 5px 7px; 
    opacity: 0.5; 
    width: 12px; 
} 

Пожалуйста, обратитесь fiddle