How to make bxslider active only on mobile view?

Question

So this is the case: I have a simple gallery, 5 images stacked on one row. After certain breakpoint this gallery have to become a image slider (using BxSlider). This is my html:

<section class="gallery clearfix">
    <a class="fancybox" href="images/pic1.png"><div class="sprite pic1"></div></a>
    <a class="fancybox" href="images/pic2.png"><div class="sprite pic2"></div></a>
    <a class="fancybox" href="images/pic3.png"><div class="sprite pic3"></div></a>
    <a class="fancybox" href="images/pic4.png"><div class="sprite pic4"></div></a>
    <a class="fancybox" href="images/pic5.png"><div class="sprite pic5"></div></a>
</section>

I have used sprite for the images.

Answer 1

Put your bxslider call in a $(window).resize()

JSFIDDLE DEMO

$(document).ready(function(){
    $(window).resize(function(){
        console.log($(window).width());
        if($(window).width() <= 400){
           $('.bxslider').bxSlider();
        }
    });
});

I put 400 for the window size but you can change that to get the desired look.