1. Trang chủ
  2. Câu hỏi và trả lời
  3. Sử dụng băng chuyền Bootstrap để chỉ hiển thị 8 mục trên mỗi trang

Sử dụng băng chuyền Bootstrap để chỉ hiển thị 8 mục trên mỗi trang

2017-04-12 27 views
5

Tôi đang tạo một mảng các đối tượng số không thể xác định (vì mảng được tạo động và dựa trên giao diện quản trị và số lượng đối tượng mà chúng đã nhập). sử dụng băng chuyền Bootstrap để chỉ hiển thị 8 đối tượng trên mỗi trang chiếu và nếu có nhiều hơn 8, hãy di chuyển phần bổ sung sang trang trình bày tiếp theo cho đến 16, sau đó trượt trang tiếp theo lên đến 24, v.v. Tôi cũng muốn nó chạy nếu người dùng nhấp vào chuyển tiếp hoặc quay lại (không tự động xem qua các trang trình bày.)Sử dụng băng chuyền Bootstrap để chỉ hiển thị 8 mục trên mỗi trang

Sau đây là mã của tôi đang chạy, bao gồm biến số idx là số đối tượng tuần tự trong mảng (không dựa).

HTML

  <div id="articles" class="articles"></div>

JavaScript:

$(document).ready(function(){ 
     <% JSONObject jsonObject=(JSONObject)session.getAttribute("responseDetailsJson"); %> 
     var tileSetObjects = <%=jsonObject%> 
      $.each(tileSetObjects.HelpJSONArray, function(idx, obj){ 
       $('#articles').append('<article class="pdf-guide" id="article-'+idx+'"><a href="'+obj.LINKVALUE+'" class="link-wrapper"><div class="title-link">'+obj.TITLE+'</div><p class="description">'+obj.LONGCONTENT+'</p></a></article>'); 
      }); 
     });

Cảm ơn bạn đã t anh ta hỗ trợ!

Nguồn

2017-04-12 dihakz

Trả lời

4

Bạn nói rằng bạn đang sử dụng Bootstrap, nhưng đánh dấu của bạn không phản ánh điều đó cả.

Tôi sẽ bắt đầu với Bootstrap JavaScript Documentation bao gồm phần chi tiết về Băng chuyền.

Khi mô tả, hãy đặt tùy chọn interval thành 'false' để tắt tự động cuộn sẽ đạt được hành vi mong muốn của bạn. Như được mô tả trong tài liệu:

Lượng thời gian để trì hoãn việc tự động chuyển một mục. Nếu sai, băng chuyền sẽ không tự động xoay vòng.

Về 8 tại một thời điểm, JavaScript của bạn trông giống như nó sẽ hoạt động, mặc dù phần tiêm đánh dấu sẽ cần phải được sửa đổi để phù hợp với đánh dấu băng chuyền Bootstrap (xem liên kết ở trên).

Nguồn

2017-04-18 03:21:18 lax1089

0

Tôi không chắc chắn nếu điều này là có thể với băng chuyền Bootstrap. Nhưng có những thanh trượt có thể đáp ứng yêu cầu của bạn. Thanh trượt "Slick" là một plugin phù hợp với yêu cầu của bạn và nó đáp ứng quá.

Bạn có thể tìm bản trình diễn tại đây: http://kenwheeler.github.io/slick/ và tìm kiếm "Nhiều mục".

Nguồn

2017-04-21 14:33:49

0

Tôi khuyên bạn nên sử dụng Flickity thư viện thanh trượt JavaScript, được xây dựng bởi David DeSandro của danh tiếng Metafizzy. Để bạn tạo hoặc tạo băng chuyền đáp ứng, thân thiện với cảm ứng có thể dễ dàng tùy chỉnh theo bạn. Điều này chứa các tính năng khác nhau như wraparround, freescroll, groupcells, autoplay, lazyload, parallax và nhiều tính năng khác.

Để bạn nhóm ô theo thứ bạn muốn, ví dụ bạn cần 8 trong mỗi trang, bạn cần đặt data-flickity='{ "groupCells": 8 } cho số bạn muốn.Sau đó chia 100% dựa trên số lượng cơ sở từ số bạn muốn, ví dụ: chia 100% thành 8 rồi đặt nó làm chiều rộng băng chuyền của bạn .carousel-cell { width: 12.5%;} Tôi hy vọng tôi sẽ giúp bạn và thêm thư viện bổ sung hoặc plugin để phát triển web của bạn. Chúc một ngày tốt lành. :)

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.min.css"> 
    <script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js"></script> 
</head> 
<body> 
    <h1>Flickity - groupCells</h1> 

    <!-- Flickity HTML init --> 
    <div class="carousel" data-flickity='{ "groupCells": 8, "autoPlay": true }' style=""> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <!--Add More Here.....--> 
    </div> 

</body> 
</html> 
<style type="text/css"> 
    /* external css: flickity.css */ 

* { box-sizing: border-box; } 

body { font-family: sans-serif; } 

.carousel { 
    background: #EEE; 
} 

.carousel-cell { 
    width: 12.5%; 
    height: 200px; 
    margin-right: 10px; 
    background: #8C8; 
    border-radius: 5px; 
    counter-increment: carousel-cell; 
} 

.carousel-cell.is-selected { 
    background: #ED2; 
} 

/* cell number */ 
.carousel-cell:before { 
    display: block; 
    text-align: center; 
    content: counter(carousel-cell); 
    line-height: 200px; 
    font-size: 80px; 
    color: white; 
} 

</style>

Nguồn

2017-04-24 14:10:03 Ace

Các vấn đề liên quan

 Các vấn đề liên quan