Adding slide in specified section when in mobile device (Using Fullpage JS)

Question

Good day. So, i have this script:

<section class="section">
    <div class="row text-center profilmain">
        <div class="portofoliogallery col-12 col-sm-6 col-md-4 col-lg-4">
                1       
        </div>
        <div class="portofoliogallery col-12 col-sm-6 col-md-4 col-lg-4">
                2   
        </div>
    </div>
</section>

so normally it will make two coloumns right ? now i want to make a condition if it in mobile device it will show one coloumn only

if($(window).width() < 600){
        $('.portofoliogallery').addClass('slidesection');
        var $this = $('.portofoliogallery').first();
        $this.parent('.row').addClass('flex-row flex-nowrap');
    }
});

then i want to add slide from fullpage js https://alvarotrigo.com/fullPage/#secondPage . i change my script to this

if($(window).width() < 600){
        $('.portofoliogallery').addClass('slidesection');
        var $this = $('.portofoliogallery').first();
            $this.parent('.row').addClass('flex-row flex-nowrap');
            alert($('.portofoliogallery').hasClass('slidesection'));
    }
});

Now i'm done adding .slidesection to my '.portofoliogallery', but the problem is my slide is not working. I can't slide it and i already change my slideselector to this slideSelector:'.slidesection'. so what did i miss ? sorry bad english

Answer 1

You'll have to destroy and initialise fullPage.js again so it can recognise the new slide.

Check out my answer in this post.