Show one slide on mobile using the bxslider

Question

So I'm using the bxslider slideshow and I'm showing 3 slides on desktop - Does anyone know if you're able to convert that to one slide on mobile? I'm using the following jQuery code.

jQuery(document).ready(function($) {
    var bx = $("#bxslider23").bxSlider({
        minSlides: 3,
        maxSlides: 3,
        moveSlides: 3,
        easing: 'easeInOutSine',
        adaptiveHeight: true,
        infiniteLoop: false,
        slideMargin: 40,
        hideControlOnEnd: true,
        slideWidth: 230,
        keyboardEnabled: true,
        touchEnabled: true,
        controls: true,
        responsive : true,
    });

    // Removes empty tags inside tabs posts
    $('p:empty').remove();

    // Reloads the carousel after tab click
    $('.ui-tabs-nav>li').on('click', function(e) {
        e.preventDefault();
        $('.bx-controls-direction').show();
        bx.redrawSlider();
    });
});

Answer 1

You could use $(window).innerWidth() to detect the screen size and set variables for min & max slides depending on the size

/* Set the default number of slides */
my_min_slides = 3;
my_max_slides = 3;
my_move_slides = 3;

/* If it is a small screen, set the variables to show just 1 slide */
if($(window).innerWidth() <= 480) {
    my_min_slides = 1;
    my_max_slides = 1;
    my_move_slides = 1;
}

/* Use the variables to initialise the slider */
jQuery(document).ready(function($) {
    var bx = $("#bxslider23").bxSlider({
        minSlides: my_min_slides,
        maxSlides: my_max_slides,
        moveSlides: my_move_slides,

        /* Rest of your initialisation here...  */
    });

    /* Rest of your jquery here....*/
});

A more efficient options would be to detect if it is mobile and not load the slider at all, just display a static slide - there is no need for the jQuery, initialising the slider etc. (Maybe bxslider already does this if there is only 1 slide - it is a long time since I used it but I don't think it did back then anyway).