6

jcarousel を使用して、複数の行を持つコンテナーを作成しようとしています。いくつか試してみましたが、うまくいきませんでした。誰でもそれを作成する方法について提案できますか?

4

6 に答える 6

10

これは@Sikeによる.jsコードの置換であり、私は少し追加しましたが、高さは動的に設定されていませんでしたが、現在は設定されています。

var defaults = {
        vertical: false,
        rtl: false,
        start: 1,
        offset: 1,
        size: null,
        scroll: 3,
        visible: null,
        animation: 'normal',
        easing: 'swing',
        auto: 0,
        wrap: null,
        initCallback: null,
        setupCallback: null,
        reloadCallback: null,
        itemLoadCallback: null,
        itemFirstInCallback: null,
        itemFirstOutCallback: null,
        itemLastInCallback: null,
        itemLastOutCallback: null,
        itemVisibleInCallback: null,
        itemVisibleOutCallback: null,
        animationStepCallback: null,
        buttonNextHTML: '<div></div>',
        buttonPrevHTML: '<div></div>',
        buttonNextEvent: 'click',
        buttonPrevEvent: 'click',
        buttonNextCallback: null,
        buttonPrevCallback: null,
        moduleWidth: null,
        rows: null,
        itemFallbackDimension: null
    }, windowLoaded = false;


    this.clip.addClass(this.className('jcarousel-clip')).css({
        position: 'relative',
        height: this.options.rows * this.options.moduleWidth
    });

    this.container.addClass(this.className('jcarousel-container')).css({
            position: 'relative',
            height: this.options.rows * this.options.moduleWidth
        });

    if (li.size() > 0) {
            var moduleCount = li.size();
            var wh = 0, j = this.options.offset;
            wh = this.options.moduleWidth * Math.ceil(moduleCount / this.options.rows);
            wh = wh + this.options.moduleWidth;

            li.each(function() {
                self.format(this, j++);
                //wh += self.dimension(this, di);
            });

            this.list.css(this.wh, wh + 'px');


            // Only set if not explicitly passed as option
            if (!o || o.size === undefined) {
                this.options.size = Math.ceil(li.size() / this.options.rows);
            }
        }

これは、jscarouselのダウンロードでコードバンドルのstatic_sample.htmlを使用する場合の呼び出しです。

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel( {
        scroll: 1,
        moduleWidth: 75,
        rows:2,        
        animation: 'slow'
    });
});

</script>

カルーセルの内容を変更してカルーセルをリロードする必要がある場合は、次のようにする必要があります。

// Destroy contents of wrapper
$('.wrapper *').remove();
// Create UL list
$('.wrapper').append('<ul id="carousellist"></ul>')
// Load your items into the carousellist
for (var i = 0; i < 10; i++)
{
$('#carouselist').append('<li>Item ' + i + '</li>');
}
// Now apply carousel to list
jQuery('#carousellist').jcarousel({ // your config });

カルーセルのhtml定義は、次のようにする必要があります。

<div class="wrapper">
    <ul id="mycarousel0" class="jcarousel-skin-tango">
     ...<li></li>
     </ul>
</div>

Webcidentesに感謝します

于 2011-08-08T22:36:25.653 に答える
8

同様の修正を行う必要がありました。これを行うには、デフォルトオプションを拡張して行の値を含め、各アイテムの幅（モジュールと呼びます）を行数で割ります。

jCarousel関数に追加されたコード...

デフォルトオプションに追加：

moduleWidth: null,
rows:null,

次に、jCarouselを作成するときに設定します。

$('.columns2.rows2 .mycarousel').jcarousel( {
        scroll: 1,
        moduleWidth: 290,
        rows:2,
        itemLoadCallback: tonyTest,
        animation: 'slow'
    });

次の行を検索して編集します。

$.jcarousel = function(e, o) { 

if (li.size() > 0) {
...
moduleCount = li.size();
wh = this.options.moduleWidth * Math.ceil( moduleCount / this.options.rows );
wh = wh + this.options.moduleWidth;

this.list.css(this.wh, wh + 'px');

// Only set if not explicitly passed as option
if (!o || o.size === undefined)
   this.options.size = Math.ceil( li.size() / this.options.rows );

お役に立てれば、

トニー・ディロン

于 2008-10-28T10:52:06.857 に答える
1

この投稿は、複数の行で機能するバージョンがあるGoogleグループで見つかりました。私はこれを使用しました、そしてそれは素晴らしい働きをします。http://groups.google.com/group/jquery-en/browse_thread/thread/2c7c4a86d19cadf9

于 2009-08-19T21:38:04.567 に答える
1

jcarouselの代わりに、serialScrollまたはlocalScrollを見たいと思うかもしれません。

于 2009-03-06T04:10:45.750 に答える
0

時々更新される可能性のあるコア ライブラリ コードの変更を絶対に必要としない、固定または 1 回限りの要件に対する迅速な解決策が必要な場合は、次の方法が適している可能性があります。カルーセルで次の 6 つの項目を 2 行にするには:

<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>

小さな JS を使用して、div を 2 つの LI グループにラップし、カルーセルを初期化できます。あなたのシナリオでは、サーバー上でのグループ化が常に可能であるとは限りません。明らかに、これを必要な数の行に拡張できます。

var $pArr = $('div.item');
var pArrLen = $pArr.length;
for (var i = 0;i < pArrLen;i+=2){
      $pArr.filter(':eq('+i+'),:eq('+(i+1)+')').wrapAll('<li />');
};
于 2012-06-17T09:00:29.147 に答える
0

上記の解決策を試してみたところ、元の jCarousel コードを変更するのが面倒であることがわかりました。連続ループなどの jCarousel の機能の一部でうまく機能しなかったため、バグのある動作が発生しました。

私はうまく機能する別のアプローチを使用しましたが、他の人もそれから利益を得ることができると思いました. これは、複数の行を持つ jCarousel をサポートするために li アイテムを作成するために使用する JS コードです。アイテムのエレガントなフロー、つまり、水平方向、垂直方向、スクロール ページの順に塗りつぶします。

123 | 789
456 | 0AB

(var carouselRows の値) 項目を単一の li に追加するため、元の jCarousel コードを変更することなく、jCarousel が複数の行をサポートできるようになります。

// Populate Album photos with support for multiple rows filling first columns, then rows, then pages
var carouselRows=3; // number of rows in the carousel
var carouselColumns=5 // number of columns per carousel page
var numItems=25; // the total number of items to display in jcarousel

for (var indexpage=0; indexpage<Math.ceil(numItems/(carouselRows*carouselColumns)); indexpage++) // for each carousel page
{
    for (var indexcolumn = 0; indexcolumn<carouselColumns; indexcolumn++) // for each column on that carousel page
    {
        // handle cases with less columns than value of carouselColumns
        if (indexcolumn<numItems-(indexpage*carouselRows*carouselColumns))
        {
            var li = document.createElement('li');

            for (var indexrow = 0; indexrow < carouselRows; indexrow++) // for each row in that column
            {
                var indexitem = (indexpage*carouselRows*carouselColumns)+(indexrow*carouselColumns)+indexcolumn;

                // handle cases where there is no item for the row below
                if (indexitem<numItems) 
                {
                    var div = document.createElement('div'), img = document.createElement('img');
                    img.src = imagesArray[indexitem]; // replace this by your images source
                    div.appendChild(img);
                    li.appendChild(div);
                }
            }
            $ul.append(li); // append to ul in the DOM
        }
    }
}

このコードが ul を li 項目で満たした後、jCarousel を呼び出す必要があります。

これが誰かに役立つことを願っています。

ジョナサン

于 2012-02-27T11:57:42.533 に答える