用Swiper7的时候用direction: 'vertical'无效，谷歌显示空白，火狐闪退bug，如何更改？

Question

用Swiper7的时候用direction: 'vertical'无效，谷歌显示空白，火狐闪退bug，如何更改？

<div class="swiper" id="swiper-banner">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
          <img src="//cdn.shopify.com/s/files/1/0558/5829/8965/files/4_4b2b79c8-294f-49d2-a14e-00e062869bec.jpg?v=1659941533" class=" ls-is-cached lazyloaded">
        </div>
        <div class="swiper-slide">
          <img src="//cdn.shopify.com/s/files/1/0558/5829/8965/files/2_0f99771c-8f46-4c5b-a5e1-5261392a80f0.jpg?v=1659941405" class=" ls-is-cached lazyloaded">
        </div>
        <div class="swiper-slide">
          <img src="//cdn.shopify.com/s/files/1/0558/5829/8965/files/4_4b2b79c8-294f-49d2-a14e-00e062869bec.jpg?v=1659941533" class=" ls-is-cached lazyloaded">
        </div>

    </div>

    <div class="swiper-button-prev" id="swiper-banner-button-prev"></div>
    <div class="swiper-button-next" id="swiper-banner-button-next"></div>

</div>


<script type="module">
  import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js'
  const swiper = new Swiper('#swiper-banner', {
    direction: 'vertical', 
    loop: true, 

    navigation: {
      nextEl: '#swiper-banner-button-next',
      prevEl: '#swiper-banner-button-prev',
    },
  
  })
</script>

<style>
  #swiper-banner-button-next{
    left:20px;
    top:55%;
    transform: rotate(90deg);
  }
  #swiper-banner-button-prev{
    left:20px;
    top:45%;
    transform: rotate(90deg);
  }
</style>

Answer 1

swiper的样式文件没导入吧，下面直接引入css和js文件是正常的

<link rel="stylesheet" href="https://lib.baomitu.com/Swiper/7.4.1/swiper-bundle.min.css" />
<div class="swiper" id="swiper-banner">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <img src="https://cdn.shopify.com/s/files/1/0558/5829/8965/files/4_4b2b79c8-294f-49d2-a14e-00e062869bec.jpg?v=1659941533" class=" ls-is-cached lazyloaded">
        </div>
        <div class="swiper-slide">
            <img src="https://cdn.shopify.com/s/files/1/0558/5829/8965/files/2_0f99771c-8f46-4c5b-a5e1-5261392a80f0.jpg?v=1659941405" class=" ls-is-cached lazyloaded">
        </div>
        <div class="swiper-slide">
            <img src="https://cdn.shopify.com/s/files/1/0558/5829/8965/files/4_4b2b79c8-294f-49d2-a14e-00e062869bec.jpg?v=1659941533" class=" ls-is-cached lazyloaded">
        </div>

    </div>

    <div class="swiper-button-prev" id="swiper-banner-button-prev"></div>
    <div class="swiper-button-next" id="swiper-banner-button-next"></div>

</div>

<script src="https://lib.baomitu.com/Swiper/7.4.1/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('#swiper-banner', {
        direction: 'vertical',
        loop: true,

        navigation: {
            nextEl: '#swiper-banner-button-next',
            prevEl: '#swiper-banner-button-prev',
        },

    })
</script>

<style>
    #swiper-banner-button-next {
        left: 20px;
        top: 55%;
        transform: rotate(90deg);
    }

    #swiper-banner-button-prev {
        left: 20px;
        top: 45%;
        transform: rotate(90deg);
    }
</style>