javascript - 从桌面切换到移动 View 时将 slider /轮播转换为分页器

Question

我创建了一个 slider /旋转木马，如下左 - 桌面 View 。

我希望它在移动屏幕上切换到基于寻呼机的 slider - 就像右侧的那个。

我已将此脚本用于桌面 slider -
https://www.jqueryscript.net/rotator/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js.html

任何帮助都会很棒，谢谢!

Answer 1

为此你必须使用 2 个插件。据我所知，您正在使用的插件没有“寻呼机”选项。然后，使用 JavaScript，您应该销毁当前插件并初始化新插件。这也可能是个问题，因为我没有看到您的插件有任何类型的 destroy 方法。好吧，它看起来像这样。

function init3DSlider() {
    $('.your-container').carousel({
        your: 'options'
    })
}
function initPagerSlider() {
    $('.your-container').somePagerPlugin({
        // ...your options
    })
}

// Function for checking which slider should turn on.
function turnOnSliderDependingOnResolution () {
    if(window.matchMedia('(min-width: 768px)').matches) {
        init3DSlider()
        // ...somehow destroy pager slider
    } else {
        initPagerSlider()
        // ...somehow destroy 3d slider
    }
}

// Run turnOnSliderDependingOnResolution function on window resize.
window.addEventListener('resize', turnOnSliderDependingOnResolution)

因为这个 3d slider 没有 destroy 方法，尝试使用这个:http://ub4.underblob.com/remove-jquery-plugin-instance/

或者您可以使用更简单的解决方案，即复制 slider ，初始化两个 slider (3D 和分页器)。然后使用 CSS 媒体查询，您将隐藏一个或另一个。

不完全是最优的，但它会工作。