时间戳

首页 > 解决方案 > 使用 bxslider 在移动设备上显示一张幻灯片

jquery - 使用 bxslider 在移动设备上显示一张幻灯片

问题描述

所以我正在使用 bxslider 幻灯片，并在桌面上显示 3 张幻灯片 - 有谁知道您是否能够在移动设备上将其转换为一张幻灯片？我正在使用以下 jQuery 代码。

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();
    });
});

标签： jquerybxslider

解决方案

您可以$(window).innerWidth()用来检测屏幕尺寸并根据尺寸设置最小和最大幻灯片的变量

/* 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....*/
});

一个更有效的选择是检测它是否是移动的并且根本不加载滑块，只显示一个静态幻灯片 - 不需要 jQuery，初始化滑块等（如果只有 1，也许 bxslider 已经这样做了幻灯片 - 我使用它已经很长时间了，但我认为它当时并没有这样做）。

推荐阅读