portfolio carosel

[sobrilliant]

hi is it possible to make the carousel for the portfolio scroll automatically (like a jquery addition?)

[Cosmin – SUPPORT]

Hi,

It is possible, but you would need to custom code this yourself.

In js/functions.js, find the CAROUSEL FUNCTIONS section, you will need to add auto: x to it, please see the documentation for the script, here: http://sorgalla.com/projects/jcarousel/

Regards,
————————————————————————————————————
Cosmin
Support Assistant

[sobrilliant]

Thanks taking a look at this function being:


/////////////////////////////////////////////
// CAROUSEL FUNCTIONS
/////////////////////////////////////////////

var carouselWidgets = {
init: function() {

carouselWidgets.windowResized();

// CAROUSELS
var carouselWrap = jQuery('.carousel-wrap'),
carousel = carouselWrap.find('.carousel-items');

carousel.jcarousel({
scroll: 1,
wrap: 'circular',
buttonNextHTML: '',
buttonPrevHTML: ''
});

jQuery(window).smartresize(function(e){
carouselWidgets.windowResized();
});
},
windowResized: function() {
var testimonialCarousel = jQuery('.wpb_testimonial_carousel_widget');

testimonialCarousel.find('li').each(function() {
jQuery(this).css("width", testimonialCarousel.width());
});
}
}


I added auto: 1, as shown below


/////////////////////////////////////////////
// CAROUSEL FUNCTIONS
/////////////////////////////////////////////

var carouselWidgets = {
init: function() {

carouselWidgets.windowResized();

// CAROUSELS
var carouselWrap = jQuery('.carousel-wrap'),
carousel = carouselWrap.find('.carousel-items');

carousel.jcarousel({
auto: 1,
scroll: 1,
wrap: 'circular',
buttonNextHTML: '',
buttonPrevHTML: ''
});

jQuery(window).smartresize(function(e){
carouselWidgets.windowResized();
});
},
windowResized: function() {
var testimonialCarousel = jQuery('.wpb_testimonial_carousel_widget');

testimonialCarousel.find('li').each(function() {
jQuery(this).css("width", testimonialCarousel.width());
});
}
}


when i added it below scroll: 1, it didnt work, when i put it above it worked BUT it doesnt stop on hover like it should? am i doing something wrong?

[Cosmin – SUPPORT]

I don’t see any option in the carousel script for pausing on hover, so this means it’s not supported.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[sobrilliant]

hi, this should already be built in?

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

Autoscrolling is enabled and the interval is set to 2 seconds. Autoscrolling pauses when the user moves the cursor over the images and stops when the user clicks the next or prev button. wrap is set to “last”.

[Cosmin – SUPPORT]

Sorry, was looking in the wrong place.

To have it stop on hover, that’s something they custom built, here’s the code from their page. You should add this above carousel.jcarousel({ :

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

Then, make carousel.jcarousel({ look like this:

carousel.jcarousel({
auto: 1,
scroll: 1,
wrap: 'circular',
buttonNextHTML: '',
buttonPrevHTML: '',
initCallback: mycarousel_initCallback
});

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[sobrilliant]

thats perfect with a little extra customisation you can see it here 🙂

http://demo.s3msuk.net/megab/

is there anyway i can change the direction of the scroll?

[Cosmin – SUPPORT]

Not sure, since the carousel isn’t developed by us.

But maybe setting rtl would do it? http://sorgalla.com/projects/jcarousel/#Configuration

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[moskoo]

Works great! Exactly what I needed… Now, I cannot find where I can change the interval, I just about looked everywhere. Any Idea?

[moskoo]

Found it!

auto: 1

This is 1 second, you just change it to whatever you like.

[Swift Ideas – Ed]

Glad you sorted it!

– Ed