My swiper-slide works well at first and I can scroll it horizontally, but after I used php to display my product details from my database and the swiper-slide now displays vertically instead of horizontally. And that is my problem - I want to display my swiper slide horizontally.

My swiper-slide works well at first and I can scroll it horizontally, but after I used php to display my product details from my database and the swiper-slide now displays vertically instead of horizontally. And that is my problem - I want to display my swiper slide horizontally.

• javascript
• php
• html
• css

Share Improve this question Follow edited Sep 25, 2018 at 8:51 curveball 4,5051515 gold badges4545 silver badges5252 bronze badges asked Sep 25, 2018 at 1:59 Mitch Frankein Mitch Frankein 3111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Firstly, I was also facing the same error then I figure out that

"<link rel="stylesheet" href="https://unpkg./swiper/swiper-bundle.min.css" ">

the above link was not included in head of the HTML..... Please visit swiper website for the link. I hope it will be helpful.

By default swiper sets "direction" to "horizontal"
make sure you have set options correctly, try the following code

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

//Using Method on page load, this will set the direction to horizontal on page load and after slider initialization

swiper.params.direction = "horizontal"; //for horizontal
swiper.update();