Tympanus Elastislide Carousel autoplay

Question

I am using tympanus Elastislide Carousel Responsive jQuery plugin for my website. The plugin works perfectly on my site. But, I want the casousel will play automacily.

But, I don't find any code for move carousel automatically.

The Slider Plugin link: http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

The java script I am using

<script type="text/javascript">

    $( '#carousel' ).elastislide( {

    // orientation 'horizontal' || 'vertical'
    orientation : 'horizontal',

    // sliding speed
    speed : 500,

    // sliding easing
    easing : 'ease-in-out',

    // the minimum number of items to show.
    // when we resize the window, this will make sure minItems are always shown
    // (unless of course minItems is higher than the total number of elements)
    minItems : 3,

    // index of the current item (left most item of the carousel)
    start : 0,

    // click item callback
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return true; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }

    } );            

</script>

Any one can help how the slider will play automaticaly? I tried autoplay: true. But, not working.

score 6 · Answer 1 · edited May 23 '17 at 12:33

Here is a modified answer from a similar question: How to modify Elastislide so it loops infinitely

This will make Elastislide autoplay and when on the last slide it will return to the first slide.

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

// autoplay true || false
autoplay : true,

You'll then have the ability to set the autoplay value (true or false) when you set the options up, as you were trying to do in your example code above.

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

Be aware that as Elastislide evolves past v1.1.0 this code may not work in future versions.

score 1 · Accepted Answer · answered May 18 '13 at 12:18

1

try the scroll property,

scroll: 1

or

you can find you answer here, all type of carousel slider given

http://sorgalla.com/jcarousel/

also see these

http://sorgalla.com/projects/jcarousel/examples/static_auto.html

answered May 18 '13 at 12:18

Pragnesh Rupapara

782
1
12
30

see the first link, it will give the all carousel type, see the demo you can find slider that you want. – Pragnesh Rupapara May 18 '13 at 12:30
hello there is not an auto scroll property in you slider js file, try other auto scrolling slider. – Pragnesh Rupapara May 18 '13 at 12:45
Thanks. I am trying to use others slider. – Rasel Ahmed May 18 '13 at 13:03
The OP is not using or asking about jCarousel. The features you are talking about are not available in Elastislide. – ORyan Jun 06 '13 at 22:11

score 1 · Answer 3 · answered Feb 02 '14 at 12:25

For http://sorgalla.com/jcarousel/

See the Autoscroll Plugin: http://sorgalla.com/jcarousel/docs/plugins/autoscroll/

$('.jcarousel')
  .jcarousel({
    wrap: 'circular'
  })
  .jcarouselAutoscroll({
    interval: 3000,
    target: '+=1',
    autostart: true
});

Tympanus Elastislide Carousel autoplay

3 Answers3

Linked

Related