Question

我尝试使用危险的Swiper.js和Handelbars制作滑块。我设置如下滑动选项

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

我尝试了更改选项，例如

freeMode：true
slidesPerColumn：1
slidesPerColumnFill： 'row'
autoHeight：true

但无法解决意外的垂直布局

here is the my swiper image

我要所有幻灯片水平显示在一排我也不断地改变滑动容器类和滑动滑动件的样式但还没有找到以正确的顺序制作东西的方法

Answer 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>

垂直方向滑动滑动显示，但水平方向

1 个答案: