javascript - Swiper slide display vertically but working horizontally - Stack Overflow

admin管理员组

文章数量:1391934

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

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

• javascript
• html
• swiper.js

Share Improve this question Follow edited Aug 20, 2019 at 6:46 Danny Cho asked Aug 20, 2019 at 6:35 Danny ChoDanny Cho 5111 silver badge33 bronze badges 4

• Do you use the plete css from swiper plugin? – tom Commented Aug 20, 2019 at 6:47
• @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 Commented Aug 20, 2019 at 7:04
• Try setup an example on jsfiddle. Sounds like a CSS issue, but it's impossible to tell without seeing your code – Brett Gregson Commented Aug 20, 2019 at 7:31
• 1 Has this issue been solved? I am encountering the same problem. – Ye' Thura Ag Commented Aug 19, 2020 at 10:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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>

I also had this issue and fixed it by adding style="align-items: center" to swiper-wrapper

https://github./nolimits4web/Swiper/issues/1513

You might need to add the swiper css to your page, I was missing these in my React code:

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/thumbs';
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel';
import 'swiper/css/autoplay';
import 'swiper/css/effect-fade';
import 'swiper/css/grid';

本文标签： javascriptSwiper slide display vertically but working horizontallyStack Overflow