Swiper slide display vertically but working horizontally

3
votes

I try to make slider using idangerous Swiper.js with Handelbars. I set up swiper option as below

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

I tried change option such as

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

but nothing fix the unintended vertical layout

here is the my swiper image

I want to all slides display in one row horizontally I also change constantly style of swiper-container class and swiper-slide but didn't find the way to make things in right order yet

1
javascripthtmlswiper
Do you use the complete css from swiper plugin? – kmgt
@kmgt I Use this css from style tag i reffered to Multiple Slides Per View Demo from Swiper Api Docs .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; --and so on-- } – Danny Cho
Try setup an example on jsfiddle. Sounds like a CSS issue, but it's impossible to tell without seeing your code – Brett Gregson
Has this issue been solved? I am encountering the same problem. – Ye' Thura Ag

1 Answers

0
votes

In my case problem was that I used wrong loaders for css in webpack. When I add

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

for webpack config, it solved the problem. Don`t forget run

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

My js code

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

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