CODEWITHSUNDEEP
jquerycarouselcaroufredsel
mshahbazm
mshahbazm

Reputation: 611

Disable caroufredsel at particular event

I am using caroufredsel in my website, I only want it to active/ work when windows width is less 960px. It is working when good, I re size browser window, when it is less then 960px it start working, But problem is when I again re size window it do not disable even when width is more then 960px,

Is there any way to disable caroufredsel when windows width is more the 959px?

Here is my code:

$(window).on("resize", function () {
    if($(window).width() <=959)
    {
        $('.item-holder').addClass('item-carousel');
        $('.item-carousel').carouFredSel(
        {
            width: "100%",
            height:200,
            circular: true,
            auto    : false,
        });

        $('#portfolio-wrapper .carousel-nav').show();

    }
    else
    {
        $('.item-holder').removeClass('item-carousel');
        $('.item-carousel').carouFredSel(false);
        $('#portfolio-wrapper .carousel-nav').hide();
    }
}).resize();

Upvotes: 1

Views: 4395

Answers (2)

partypete25
partypete25

Reputation: 4413

Create a global variable that gets the content of the parent of the carousel.

var carouselContent = $('.item-carousel').parent().html();

Then, when you want to disable carouFredSel do this:

$('.item-carousel').parent().empty().html(carouselContent );

Also, you can target the parent directly and not bother with the parent() selector. I've only used it in my example because i don't know the class name or id of the parent element.

Upvotes: 1

William Craig
William Craig

Reputation: 136

Use this:

 $(".item-carousel").trigger("destroy");

instead of 

$('.item-carousel').carouFredSel(false);

Upvotes: 6

Related Questions