0
votes

i am looking for solution with auto-slide functions in my jquery carouselfredsel slider. jsfiddle.net/5p349dpo/4/

He is defined with this code:

jQuery("#grid").carouFredSel({
    width: 5000,
    padding: 0,
    auto: true,
    prev: "#grid-prev",
    next: "#grid-next",
    items: {
        visible: 3,
        minimum: 1,
        start: -1
    },
    scroll: {
        items: 1,
        duration: 1000
    }
});

As u can see, the 'auto' option is set to 'true'. The default was 'false'.

Picture No.1 - in this picture the PROBLEM and a behavior of slider is described, and how it is supposed to look like.

Picture No.2 - here is what i get with auto-slide enabled.

Picture No.1 Picture No.2

Now: the main reason why left/right slides are faded and the centered slide (active-slide) is non-faded is because of this code:

// Highlight Center Panel

jQuery(window).resize(function() {
    var nextCenter = Math.ceil(jQuery(window).width() / 900);
    var prevCenter = Math.ceil((jQuery(window).width() - 900) / 900);
    jQuery(".grid-panel:eq("+prevCenter+")").addClass("active-panel");

    jQuery("#grid-next").click(function(){
        jQuery(".grid-panel").removeClass("active-panel");
        jQuery(".grid-panel:eq("+nextCenter+")").addClass("active-panel");
    });

    jQuery("#grid-prev").click(function(){
        jQuery(".grid-panel").removeClass("active-panel");
        jQuery(".grid-panel:eq("+prevCenter+")").addClass("active-panel");
    });
}).resize();

Now as you can see, next/prev buttons have been defined how to deal with left/centered/right slides, as they are faded/non-faded/faded.

When i set auto: false to auto: true in php file. Slider started to act like in Picture No.2 (non-faded/faded/faded .. etc), like it just froze those fading/non-fading style and get this nice slider in 'chaos'.

I would like to add something similar to 2nd code that i included here in post, so the auto-slider acts just like i would be clicking ''next'' button.

Please help.

1
can you share the codepen or jsfiddle demo? - Tushar
Add the HTML including the images of your slides in html, the fiddle you provided is not enough to understand. - Tushar
There is just the footer, need to see the images of your slider. - Tushar
well, i dont know how to include html with pictures since the whole page is hosted on wamp, and all image links lead to localhost/.... ill try to find some solution... give me few minutes - John Smith

1 Answers

0
votes

Ok...

After some time, i found a solution, it is not that complicated what i was looking for in first place, it is even more simple.

Auto scroll doesn't even need to be enabled. And since the ''next/prev'' buttons were already configured to work, i just simulated them, and it looks like this:

function simulateClick(){
    $('#grid-next').click();
};

setInterval(simulateClick, 2000);

There you go, simple. I hope this will help someone in future.

Good bye :)