3

このデモと同じ方法で、カルーセル ページャーで Cycle2 を使用しています: http://jquery.malsup.com/cycle2/demo/caro-pager.php

現在、デモのアクティブなスライドは、最後の数枚のスライドを使用していない限り、左側にあります。私が欲しいのは：

  1. アクティブなスライドが左側のスライド 1 から始まるように
  2. 次に、スライド 2 をクリックすると、サムネイルは移動しませんが、2 番目のサムネイルがアクティブとして表示されます。
  3. スライド 3 をクリックすると、サムネイルは移動せず、3 番目のサムネイル (中央) がアクティブになります)。
  4. スライド 4 をクリックすると、すべてのサムネイルが 1 つ左に移動し、4 番目のサムネイル (現在は中央) がアクティブになります。
  5. スライド 5、6、7 については上記と同じです。
  6. スライド 8 をクリックすると、サムネイルは移動しませんが、8 番目のサムネイルがアクティブになります (現在は右から 2 番目)。
  7. スライド 9 をクリックすると、サムネイルは移動しませんが、9 番目のサムネイル (右側の最後のサムネイル) がアクティブになります。

図を参照してください:

ここに画像の説明を入力

ここでデモをjsfiddleにコピーしました：http://jsfiddle.net/Qhp2g/1/しかし、どこから始めればよいかわからないので、本当に助けていただければ幸いです(!)このユーザーが試したように、 data-cycle-carousel-offset="40%"onを使用してみました#cycle-2同様の問題Cycle2：メインスライドショーの下の中央カルーセルアクティブスライドで、最後のスライドにアクセスできず、最初の左側にスペースがあるため、これは機能しません。

必要に応じてプラグイン カルーセル スクリプト ( http://malsup.github.io/jquery.cycle2.carousel.js ) を変更する必要があると思いますが、どこから始めればよいかわかりません。助けてくれてありがとう。

4

3 に答える 3

2

上記のブライアンのすばらしい答えを参考にして、いくつかの変更を加えました。minCurr が実際にオフセットよりも小さい場合、彼のソリューションにはバグがありました (マイナスになることもあります)。彼の解決策は、5 個が表示され、オフセットが 2 の 8 個以上のサムネイルで機能しました。ただし、5 個が表示され、オフセットが 2 のサムネイルが 6 個しかないため、minCurr = 6 - (5 + 2) = -1 また、7 個のサムネイルがある場合5 が表示され、2 minCurr = 1 のオフセットがあり、同じ問題が存在します。

解決策は変更することです

var minCurr = opts.slideCount - (opts.carouselVisible + offset);

に

var minCurr = opts.slideCount - (opts.carouselVisible + offset);
if(minCurr < offset ){
   var minCurr = offset;
}

これを行った後、終了の開始近くでオフセット量を超えて前後にクリックし、カルーセルが移動しすぎた場合に備えて、他の調整も行う必要がありました。

編集したコードは次のようになります。

    var offset = 2; //Number of slides to offset
    // handle all the edge cases for wrapping & non-wrapping
    if ( opts.allowWrap === false ) {
        fwd = hops > 0;
        var currSlide = opts._currSlide;
        var maxCurr = opts.slideCount - (opts.carouselVisible - offset);
        var minCurr = opts.slideCount - (opts.carouselVisible + offset);
        if(minCurr < offset){
            minCurr = offset;
        }
        if(fwd){ // MOVING FORWARDS
            if ( opts.nextSlide > maxCurr && currSlide == maxCurr|| opts.nextSlide <= minCurr ) {
                hops = 0;
            }
            else if (opts.currSlide < minCurr && opts.nextSlide > maxCurr || opts.nextSlide > maxCurr){
                 hops += opts.currSlide - maxCurr;
            }
            else if (opts.currSlide < minCurr && opts.nextSlide > minCurr){
                 hops = opts.nextSlide - minCurr;  
            }
            else {
                currSlide = opts.currSlide;
            }

        } else { // MOVING BACKWARDS
            if ( opts.currSlide > maxCurr && opts.nextSlide > maxCurr || opts.currSlide <= minCurr ) {
                hops = 0;
            }
            else if (hops < -offset && opts.nextSlide < minCurr){
                hops = opts.nextSlide;
            }
            else if ( opts.currSlide > maxCurr) {
                hops += opts.currSlide - maxCurr;
            }
            else if (opts.nextSlide < minCurr){
                hops = opts.nextSlide - minCurr; 
            }
            else {
                currSlide = opts.currSlide; 
            }
        }


        moveBy = this.getScroll( opts, vert, currSlide, hops );
        opts.API.opts()._currSlide = opts.nextSlide > maxCurr ? maxCurr : opts.nextSlide;
    }
于 2015-02-07T22:38:33.297 に答える
1

JQuery lightSlider を使用できます。これは、ページャーのアクティブなサムネイル スライドを常に中央にサポートし、カスタマイズへのカスタム コールバックも備えています。

http://sachinchoolur.github.io/lightslider/

http://sachinchoolur.github.io/lightslider/settings.html

于 2014-12-19T05:46:09.230 に答える