Javascript 滑动滑梯垂直显示，但水平工作

我尝试使用idangerous Swiper.js和Handelbar制作滑块。我设置了swiper选项，如下所示

var swiper = new Swiper('.swiper-container', {
     slidesPerView: 3,
     direction: 'horizontal'   
  });

我尝试改变选项，例如

自由模式：true
幻灯片列：1
幻灯片列填充： “行”
自动高度：真

但是没有任何东西可以修复意外的垂直布局

我希望所有幻灯片水平显示在一行中 我还不断地更改swiper容器类和swiper幻灯片的样式

---

但是，我还没有找到使事情按正确的顺序进行的方法。

在我的例子中，问题是我在网页包中对css使用了错误的加载程序。 当我加上

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
},

对于webpack配置，它解决了这个问题。 别忘了跑步

npm install --save-dev style-loader css-loader

我的js代码

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
const swiper = new Swiper('.swiper-container');

我的html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

幻灯片1
幻灯片2
幻灯片3

您是否使用swiper插件的完整css？@kmgt我使用样式标签中的css，我从swiper Api文档的每个视图演示中引用了多张幻灯片。swiper容器{宽度：100%；高度：100%；}。swiper幻灯片{文本对齐：居中；字体大小：18px；背景：#fff；/*垂直居中幻灯片文本*/display:-webkit-box；display:-ms-flexbox；display:-webkit-flex；display:flex；-webkit-box-pack:center；-ms-flexpack:center；--依此类推--}尝试在JSFIDLE上设置一个示例。听起来像是CSS问题，但是如果不看到您的代码，就无法判断这个问题是否已解决？我遇到了同样的问题。