滑动滑动显示垂直但水平工作答案

【问题标题】：Swiper slide display vertically but working horizontally滑动滑动显示垂直但水平工作
【发布时间】：2019-12-25 07:57:27
【问题描述】：

我尝试使用带有 Handelbars 的危险 Swiper.js 制作滑块。我如下设置了 swiper 选项

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

我尝试了更改选项，例如

freeMode: true
slidesPerColumn:1
slidesPerColumnFill: '行'
autoHeight: true

但没有什么能解决意外的垂直布局

here is the my swiper image

我想让所有幻灯片水平显示在一行中我也不断改变 swiper-container 类和 swiper-slide 的风格但还没有找到让事情按正确顺序排列的方法

【问题讨论】：

你使用的是来自 swiper 插件的完整 css 吗？
@kmgt 我使用来自 Swiper Api Docs .swiper-container { width: 100%;高度：100%； } .swiper-slide { 文本对齐：居中；字体大小：18px；背景：#fff; /* 垂直居中幻灯片文本 */ display: -webkit-box;显示：-ms-flexbox；显示：-webkit-flex；显示：弯曲； -webkit-box-pack：中心； -ms-flex-pack：中心； --等等--}
尝试在 jsfiddle 上设置一个示例。听起来像是 CSS 问题，但不看代码就无法判断
这个问题解决了吗？我遇到了同样的问题。

标签： javascript html swiper

【解决方案1】：

就我而言，问题是 我在 webpack 中为 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>

【讨论】：