ブートストラップカルーセルを使用して各スライドに8個のアイテムしか表示しない

不確定な番号のオブジェクトの配列を生成しています（管理インターフェイスと入力されたオブジェクトの数に基づいて配列が動的に作成されるためです）。ブートストラップカルーセルを使用して各スライドに8つのオブジェクトのみを表示し、8以上のオブジェクトがある場合は、次のスライドを16に移動し、次のスライドを24まで移動します。ユーザーが前方または後方をクリックすると（スライドを自動的に通過しないように）ブートストラップカルーセルを使用して各スライドに8個のアイテムしか表示しない

以下は、変数idxを含む実行中のコードです。配列（ゼロベース）。

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>'); 
      }); 
     });

はトンいただき、ありがとうございます彼は助け！

出典

2017-04-12 dihakz

あなたはブートストラップを使っていますが、あなたのマークアップはそれを全く反映していないと言います。

私はBootstrap JavaScript Documentationで始まります。詳細については、カルーセルのセクションをご覧ください。

説明したように、intervalオプションを 'false'に設定すると、目的の動作になる自動スクロールが無効になります。ドキュメントに記載されているとおり：

アイテムを自動的にサイクリングするまでの遅延時間。 falseの場合、カルーセルは自動的に循環しません。

一度に8つについては、マークアップ注入部分がブートストラップカルーセルマークアップ（上記のリンクを参照）と一致するように変更する必要があります。

出典

2017-04-18 03:21:18 lax1089

-1

オブジェクトの数は、あなたがBootStrap Carouselに割り当てる幅に依存し、各スライドの幅によって異なります。

enter code herehttp://jsfiddle.net/asimshahiddIT/f1a1zbh4/1/

出典

2017-04-21 13:02:06 asimshahiddIT

私は、これはブートストラップカルーセルで可能であるかどうかわからないです。しかし、あなたの要件を満たすことができるスライダーがあります。「Slick」スライダは、あなたの要件に合ったプラグインです。

ここにデモがあります：http://kenwheeler.github.io/slick/と「複数のアイテム」を検索してください。

出典

2017-04-21 14:33:49

私は、使用することをお勧めしますFlickityデビッドDeSandro Metafizzyの名声によって建てられたJavaScriptスライダーライブラリ。あなたが簡単にカスタマイズできる、反応がよく、タッチフレンドリーなカルーセルを作成または作成するためにこれには、ラブラドル、フリースケール、グループセル、自動再生、ラジーロード、視差などのさまざまな機能が含まれています。

あなたが望むものをグループセルにするためには、すべてのスライドに8個必要です。data-flickity='{ "groupCells": 8 }あなたが望む番号に設定する必要があります。それからあなたが望む番号から何番目のベースに100％を割りますか？たとえば、100％で8に分けてカルーセル幅に設定します。.carousel-cell { width: 12.5%;}私はあなたを助け、あなたのウェブ開発のためのライブラリやプラグインを追加します。良い一日を。 :)

<!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>

出典

2017-04-24 14:10:03 Ace

ブートストラップカルーセルを使用して各スライドに8個のアイテムしか表示しない

答えて

関連する問題