3

一度に複数の画像を表示し、応答性が高く、無限にループする画像カルーセルを探していました。

Elastislide が最も適しているようです ( http://tympanus.net/Development/Elastislide/index2.html )。

私が見つけることができた他の唯一の実用的なオプションは、John Nikolakis による Liquid Carousel です。これは、かなり古く、エレガントではないようです。

http://www.w3schools.com/js/js_timing.aspに示されている clearTimeout() メソッドと同様のメソッドを使用して、Elastislide を自動再生 (一種) させましたが、最後に到達すると停止します。タイミングは次のボタン (.es-nav-next) を呼び出すだけです。

誰かが Elastislide を変更して無限ループにするのを手伝ってくれることを願っています。または、上記の 3 つの要件を満たす別のソリューションの提案を受け付けています。

現時点では、OpenCart のローカル インストールに取り組んでいますが、静的サンプルを作成してリンクを提供することができます。

私がjavascriptの完全なアマチュアである限り、これに何時間も費やしてきたので、どんな助けやアドバイスも大歓迎です:)

4

7 に答える 7

9

Elastislide コードは進化しており、上記のソリューションは機能しません。そこで、独自のソリューションを開発しました。

このコードはエラスティスライドを自動再生し、最後のスライドに到達すると最初のスライドに戻り、無限ループのカルーセルよりも人間工学的になります。

このコードは、_initEvents関数の var の後に追加する必要がありますself = this;

var translation = 0;
// width/height of an item ( <li> )
var itemSpace = this.options.orientation === 'horizontal' ? this.$items.outerWidth( true ) : this.$items.outerHeight( true );
// total width/height of the <ul>
var totalSpace = this.itemsCount * itemSpace;
// visible width/height
var visibleSpace = this.options.orientation === 'horizontal' ? this.$carousel.width() : this.$carousel.height();
//slide auto
window.setInterval(function(){
    //test if we should go to next slide or return to first slide
    if(totalSpace > translation + visibleSpace)
    {
        //go to next slide
        self._slide('next');
        //update translation
        translation += visibleSpace;
    }
    else
    {
        //return to first slide (infinite loop is too bad for ergonomics)
        self._slideTo(0);
        //set translation to 0
        translation = 0;
    }
}, 7000);
于 2013-02-21T11:36:39.583 に答える
2

このコードは無限ループを作成し、アニメーションを保持し、ページに表示されるよりも多くの要素がある場合に両側にナビゲーション ボタンを表示します。機能は元の_toggleControlsバージョンと同じままです。

// modified version of _slide
_slide              : function( dir, val, anim, callback ) {

        // if animating return
        if( this.$slider.is(':animated') )
            return false;

        // current margin left
        var ml      = parseFloat( this.$slider.css('margin-left') );

        // val is just passed when we want an exact value for the margin left (used in the _slideToCurrent function)
        if( val === undefined ) {

            // how much to slide?
            var amount  = this.fitCount * this.itemW, val;

            if( amount < 0 ) return false;

            // make sure not to leave a space between the last item / first item and the end / beggining of the slider available width
            if( dir === 'right' && this.sliderW - ( Math.abs( ml ) + amount ) < this.visibleWidth ) {
                for (var i=0;i<this.fitCount;i++) { // add elements
                    this.$slider.css('margin-left', '+=' + this.itemW );
                    this.$slider.append( this.$slider.children('li:first').clone() ) ;
                    this.$slider.children('li:first').remove();
                }
            } else if ( dir === 'left' && Math.abs( ml ) - amount < 0 ) {
                for (var i=0;i<this.fitCount;i++) { // add elements
                    this.$slider.css('margin-left', '-=' + this.itemW );
                    this.$slider.prepend( this.$slider.children('li:last').clone() ) ;
                    this.$slider.children('li:last').remove();
                }
            }

            ( dir === 'right' ) ? val = '-=' + amount : val = '+=' + amount

        }
        else {
            var fml     = Math.abs( val ); // future margin left

            if( Math.max( this.sliderW, this.visibleWidth ) - fml < this.visibleWidth ) {
                val = - ( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth );
                if( val !== 0 )
                    val += this.options.margin; // decrease the margin left if not on the first position

                // show / hide navigation buttons
                this._toggleControls( 'right', -1 );
                fml = Math.abs( val );
            }

            // show / hide navigation buttons
            if( this.fitCount < this.itemsCount )
                this._toggleControls( 'left', 1 );
            else
                this._toggleControls( 'left', -1 );

            if( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth > fml + this.options.margin )   
                this._toggleControls( 'right', 1 );
            else
                this._toggleControls( 'right', -1 );

        }

        $.fn.applyStyle = ( anim === undefined ) ? $.fn.animate : $.fn.css;

        var sliderCSS   = { marginLeft : val };

        var instance    = this;

        this.$slider.applyStyle( sliderCSS, $.extend( true, [], { duration : this.options.speed, easing : this.options.easing, complete : function() {
            if( callback ) callback.call();
        } } ) );

    },
于 2012-11-03T17:15:41.397 に答える
1

ナビゲーションを非表示にして最初のアイテムを追加したり、最後のアイテムを追加したりする代わりに、toggleControls（）関数をハックすることでそれを行いました。あなたがアイテムの最初/最後にいるときの量の自動修正は実際にトリックをするのを助けました。残念ながら、イージングを使用するとアニメーションが壊れます。

// modified version of _toggleControls
    _toggleControls     : function( dir, status ) {

        // show / hide navigation buttons
        if( dir && status ) {
            if( status === 1 )
                ( dir === 'right' ) ? this.$navNext.show() : this.$navPrev.show();
            else
                if ( dir === 'right' ) {

                    this.$slider.append( this.$slider.children('li:first').clone() ) ;
                    this.$slider.children('li:first').remove();
                } else {

                    this.$slider.prepend( this.$slider.children('li:last').clone() ) ;
                    this.$slider.children('li:last').remove();
                }
        }
        else if( this.current >= this.itemsCount - 1 || this.fitCount >= this.itemsCount )
                this.$navNext.hide();

    },
于 2012-07-15T14:18:53.810 に答える
1

このコードを_initEvents関数の後に追加します--varinstance= this; elastislideを自動再生します。

window.setInterval(function(){
                instance._slide('right');
            }, 7000);
于 2013-02-14T19:20:32.210 に答える
1

I was having the same trouble as the OP, but couldn't get either of the above solutions to work. Not sure if I was doing something wrong or if the Elastislide code had changed since those solutions were written.

I found this plugin, which seems to satisfy all the same criteria that the OP had: responsive carousel with auto-play and infinite loop.

http://caroufredsel.dev7studios.com/

Hopefully this helps someone else that finds this article the same way I did.

于 2012-12-27T18:02:59.900 に答える
0

RoxySkaの回答を少し修正したバージョンで、初期設定でオンとオフを切り替える機能を追加しました。

これにより、Elastislide が自動再生され、最後のスライドで最初のスライドに戻ります。

$.Elastislide.defaults次のコードをオブジェクトの後に追加しstart : 0,ます。

// autoplay true || false
autoplay : true,

上記のコード例で試みたように、オプションを設定するときにautoplay値 (true または false) を設定することができます。

このコードは、_initEvents関数の var の後に追加する必要がありますself = this;

     if(this.options.autoplay == true){
            var translation = 0;
            // width/height of an item ( <li> )
            var itemSpace = this.options.orientation === 'horizontal' ? this.$items.outerWidth( true ) : this.$items.outerHeight( true );
            // total width/height of the <ul>
            var totalSpace = this.itemsCount * itemSpace;
            // visible width/height
            var visibleSpace = this.options.orientation === 'horizontal' ? this.$carousel.width() : this.$carousel.height();
            //slide auto
            window.setInterval(function(){
                //test if we should go to next slide or return to first slide
                if(totalSpace > translation + visibleSpace)
                {
                    //go to next slide
                    self._slide('next');
                    //update translation
                    translation += visibleSpace;
                }
                else
                {
                    //return to first slide
                    self._slideTo(0);
                    //set translation to 0
                    translation = 0;
                }
            }, 7000);
        }

Elastislide が v1.1.0 を過ぎて進化するにつれて、このコードは将来のバージョンでは機能しない可能性があることに注意してください。

于 2013-06-06T22:55:46.740 に答える
0

これはエラスティスライドの古いバージョン用です。おそらく、このコードは誰かを助けることができます.

これは無限ループではありませんが、サムネイルカルーセルの最後まで来て次をクリックするとアニメーションで初期状態に戻り、最初で前ボタンを押すと最後まで動きます。サムネイル画像が持続します。

まず、 _toggleControlsのすべての行をコメント化 (または削除) する必要があります。これにより、ナビゲーションのボタンが非表示になるのを回避できます。

そして_slideのコードを変更します:

        _slide              : function( dir, val, anim, callback ) {

        var ml      = parseFloat( this.$slider.css('margin-left') );

        // val is just passed when we want an exact value for the margin left (used in the _slideToCurrent function)
        if( val === undefined ) {

            // how much to slide?
            var amount  = this.fitCount * this.itemW, val;

            if( amount < 0 ) return false;
            // make sure not to leave a space between the last item / first item and the end / beggining of the slider available width
            if( dir === 'right' && this.sliderW - ( Math.abs( ml ) + amount ) < this.visibleWidth ) {                   
                amount  = this.sliderW - ( Math.abs( ml ) + this.visibleWidth ) - this.options.margin; // decrease the margin left
                //Loop to the beginning
                if (amount === 0) {
                    this.current = 0;                       
                    amount = this.sliderW - this.visibleWidth;
                    anim = undefined;
                    dir = 'left';
                }
            }
            else if( dir === 'left' && Math.abs( ml ) - amount < 0 ) {
                amount  = Math.abs( ml );
                //Loop to the end
                if ($(".es-carousel ul").css("margin-left") === "0px") {
                    this.current = this.itemsCount - 1;
                    amount = -(this.sliderW - this.visibleWidth);                       
                    anim = undefined;
                }
            }
            else {
                var fml; // future margin left
                ( dir === 'right' ) 
                    ? fml = Math.abs( ml ) + this.options.margin + Math.abs( amount )
                    : fml = Math.abs( ml ) - this.options.margin - Math.abs( amount );                      
            }

            ( dir === 'right' ) ? val = '-=' + amount : val = '+=' + amount;                
        }
        else {
            var fml     = Math.abs( val ); // future margin left

            if( Math.max( this.sliderW, this.visibleWidth ) - fml < this.visibleWidth ) {
                val = - ( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth);
                if( val !== 0 )                     
                    val += this.options.margin; // decrease the margin left if not on the first position                        
                fml = Math.abs( val );
            }
        }

        $.fn.applyStyle = ( anim === undefined ) ? $.fn.animate : $.fn.css;

        var sliderCSS   = { marginLeft : val };

        var instance    = this;

        this.$slider.stop().applyStyle( sliderCSS, $.extend( true, [], { duration : this.options.speed, easing : this.options.easing, complete : function() {
            if( callback ) callback.call();
        } } ) );

    },
于 2014-12-19T00:57:36.340 に答える