Как изменить Elastislide так, чтобы он работал бесконечно

Я искал карусель изображений, которая будет отображать несколько изображений одновременно, она отзывчива и работает бесконечно.

Elastislide кажется наиболее подходящим (http://tympanus.net/Development/Elastislide/index2.html ).

Единственный другой практический вариант, который мне удалось найти, - это «Жидкая карусель» Джона Николакиса, которая кажется немного старше и менее элегантной.

Я получил Elastislide для автозапуска (вроде), используя метод, аналогичный методу ClearTimeout (), показанному наhttp://www.w3schools.com/js/js_timing.asp, но как только он достигает конца, он останавливается, поскольку время просто вызывает следующую кнопку (.es-nav-next).

Я надеюсь, что кто-то может помочь мне с изменением Elastislide, чтобы сделать его бесконечным циклом - или я открыт для предложений по другому решению, которое соответствует моим 3 требованиям (перечисленным выше).

В данный момент я работаю над локальной установкой OpenCart, но я могу создать статический пример и предоставить ссылку, если это поможет.

Буду очень признателен за любую помощь или совет, потратил много часов на это, поскольку я - полный любитель в javascript :)

Ответы на вопрос(7)

чтобы сделать автоигру из эластилида.

window.setInterval(function(){
                instance._slide('right');
            }, 7000);
 06 июн. 2013 г., 22:08
Это заставит его воспроизводиться автоматически, но не учитывает, что происходит, когда ползунок достигает последнего слайда или когда пользователь нажимает следующую кнопку вручную. Это остановится на последнем слайде. Если пользователь нажимает следующее вручную на отметке 6500 мс, ползунок будет двигаться вперед дважды подряд.

сохраняет анимацию и показывает кнопки навигации с обеих сторон, если элементов больше, чем показано на странице._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();
        } } ) );

    },

и вышеуказанное решение не работает. Поэтому я разработал свое собственное решение.

Этот код делает автозапуск эластичного слайда, и когда он прибывает на последний слайд, он возвращается к первому слайду, чтобы быть более эргономичным, чем карусель с бесконечным циклом.

Этот код должен быть добавлен в_initEvents функция после вар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);
 31 мар. 2013 г., 18:21
Подтверждено! Это работает, спасибо за потрясающее обновление +1, вставьте код в файл & quot; jquery.elastislide.js & quot; в & quot; _initEvents: function () & quot; сразу после & quot; self = this & quot ;.

что и у ОП, но я не смог заставить работать ни одно из перечисленных выше решений. Не уверен, что я делал что-то не так или код Elastislide изменился с тех пор, как были написаны эти решения.

Я нашел этот плагин, который, кажется, удовлетворяет всем тем же критериям, что и OP: отзывчивая карусель с авто-воспроизведением и бесконечным циклом.

http://caroufredsel.dev7studios.com/

Надеюсь, это поможет кому-то еще, кто найдет эту статью таким же, как я.

 02 апр. 2013 г., 23:02
Ницца! Большое спасибо :)

добавив возможность его включения и выключения с настройками инициализации.

Это сделает Elastislide автовоспроизведением, и когда на последнем слайде он вернется к первому слайду.

Add this code to the $.Elastislide.defaults object after start : 0,:

// autoplay true || false
autoplay : true,

После этого вы сможете установитьautoplay значение (true или false) при настройке параметров, как вы пытались сделать в приведенном выше примере кода.

This code should be added in the _initEvents function after 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 после версии 1.1.0 этот код может не работать в будущих версиях.

взломав функцию 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();

    },
 13 окт. 2012 г., 10:26
очень хороший ответ, вы получили мой голос, но есть еще одна вещь, как не допустить скольжения карусели к первым элементам через несколько секунд, нажимая кнопки навигации?

может быть, этот код может кому-то помочь.

Это не бесконечный цикл, но когда вы доберетесь до конца карусели миниатюр и нажмете кнопку «Далее», анимация вернется в исходное состояние, а если вы в начале и нажмете кнопку «Предыдущая», она будет перемещаться до длится эскизы изображений.

Сначала вы должны прокомментировать (или удалить) все строки_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();
        } } ) );

    },

Ваш ответ на вопрос