主页 / 问题 / 1380918
Accepted
hardi
Asked:2022-07-11 17:24:07 +0000 UTC2022-07-11 17:24:07 +0000 UTC

该列表变成特定扩展上的滑块

  • 772

大家好，我有一个非常重要的问题。这是一个块列表，在某些扩展上它变成一个滑块。如何在 swiper.js 上正确执行？我厌倦了使用各种拐杖。

javascript

2 个回答

  1. 您需要跟踪屏幕宽度，并以您需要的宽度运行滑块初始化：

    const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;

if(width >= 720) {
    ... код инициализации слайдера
}
    • 2
  2. Best Answer
    export const resizeSwiper = function resizeSwiper() {
    let swiperDom = document.querySelector('.spheres__content')
    let swiperStyle = document.querySelector('.main-page__spheres')
    if(document.body.clientWidth <= 550) {
        swiperDom.querySelector('.spheres__row').classList.add('swiper-wrapper')
        swiperDom.querySelectorAll('.spheres__column').forEach(item => {
            item.classList.add('swiper-slide')
        })
        new Swiper('.spheres__content', {})
        swiperStyle.classList.add('swiper-on')
        swiperStyle.classList.remove('swiper-off')
    } else {
        const swiper = new Swiper('.spheres__content', {})
        swiper.destroy(true,true)
        swiperDom.querySelector('.spheres__row').classList.remove('swiper-wrapper')
        swiperDom.querySelectorAll('.spheres__column').forEach(item => {
            item.classList.remove('swiper-slide')
        })
        swiperStyle.classList.add('swiper-off')
        swiperStyle.classList.remove('swiper-on')
    }
}
    • 0

相关问题