从台式机切换到移动视图时，将滑块/轮播转换为寻呼机

Question

我已经创建了一个滑块/转盘，如左图所示-桌面视图。

我希望它可以切换到移动屏幕上基于Pager的滑块，就像右侧的滑块一样。

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

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

Answer 1

您将必须使用2个插件。据我所知，您正在使用的插件没有“ pager”选项。然后，使用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滑块没有destroy方法，请尝试使用此方法：http://ub4.underblob.com/remove-jquery-plugin-instance/

或者您可以使用更简单的解决方案，即复制滑块，初始化两个滑块（3D和寻呼机）。然后，使用CSS媒体查询可以隐藏一个或另一个。

不是最佳选择，但可以使用。