Autoplay responsive slider

[talent74]

http://sorgalla.com/jcarousel/examples/responsive/

How would you make this auto play on page load, pause on rollover, change the speed etc..?

[jsor]

You can use the autoscroll plugin: http://sorgalla.com/jcarousel/docs/plugins/autoscroll/

See this issue comment on how to stop/start autoscroling on hover: https://github.com/jsor/jcarousel/issues/353#issuecomment-4766529

[talent74]

Avoiding any use of plugins, what do I need to add to the following responsive.js? `

(function($) { $(function() { var jcarousel = $('div.slider');

jcarousel
    .on('jcarousel:reload jcarousel:create', function () {
        var carousel = $(this),
            width = carousel.innerWidth();

        if (width >= 900) {
            width = width / 4;
        } else if (width >= 600) {
            width = width / 3;
        } else if (width >= 350) {
            width = width / 2;
        }

        carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
    })
    .jcarousel({
        wrap: 'circular'
    });

$('.prev')
    .jcarouselControl({
        target: '-=1'
    });

$('.next')
    .jcarouselControl({
        target: '+=1'
    });

$('.jcarousel-pagination')
    .on('jcarouselpagination:active', 'a', function() {
        $(this).addClass('active');
    })
    .on('jcarouselpagination:inactive', 'a', function() {
        $(this).removeClass('active');
    })
    .on('click', function(e) {
        e.preventDefault();
    })
    .jcarouselPagination({
        perPage: 1,
        item: function(page) {
            return '<a href="#' + page + '">' + page + '</a>';
    }
});

}); })(jQuery);

`

[talent74]

I tried adding: `

    $('div.slider')
        .jcarousel()
        .jcarouselAutoscroll()
        .hover(function() {
            $(this).jcarouselAutoscroll('stop');
        }, function() {
            $(this).jcarouselAutoscroll('start');
        });`

[talent74]

BTW the link: http://sorgalla.com/projects/jcarousel/examples/static_auto.html raises 404 not found, not sure if you are aware of this

[jsor]

Do you get any errors? The code looks correct.

BTW the link: http://sorgalla.com/projects/jcarousel/examples/static_auto.html raises 404 not found, not sure if you are aware of this

Yes, that used to be the docs for the old 0.2 version. The new docs are at http://sorgalla.com/jcarousel/docs/plugins/autoscroll/

[talent74]

Yes, sorry I should have included... Uncaught SyntaxError: Unexpected token .

Maybe I added it in the wrong place? I did try various positioning inside the original code. Same error code and breaks the responsiveness.

[jsor]

If you could provide a reproducible test case i could have a look at it.

[talent74]

Great thanks! I'll add to a server, it's on my local set up right now, bear with me...

[talent74]

Here you go: http://www.fabjungphotography.com/jcarousel/jcarousel.html

I am seeing a different error now... Uncaught SyntaxError: Unexpected identifier

[jsor]

There is a missing });here

            .jcarouselPagination({
                perPage: 1,
                item: function(page) {
                    return '<a href="#' + page + '">' + page + '</a>';
            } // <---

            $('div.slider')

Correct:

            .jcarouselPagination({
                perPage: 1,
                item: function(page) {
                    return '<a href="#' + page + '">' + page + '</a>';
            });

            $('div.slider')

[talent74]

Actually, that didn't do it, but it did help me see I had put it in the wrong place.

correct: `

        }
    });
    $('div.slider')
        .jcarousel()
        .jcarouselAutoscroll()
        .hover(function() {
            $(this).jcarouselAutoscroll('stop');
        }, function() {
            $(this).jcarouselAutoscroll('start');
        });`

[talent74]

Thanks for your help on the autoplay(scroll). Any ideas how to adjust the speed and easing?

[jsor]

See the docs: http://sorgalla.com/jcarousel/docs/plugins/autoscroll/reference/configuration.html#interval http://sorgalla.com/jcarousel/docs/reference/configuration.html#animation

[talent74]

Thanks again, I'll take a look