CODEWITHSUNDEEP
javascriptphphtmlcss
Mitch Frankein
Mitch Frankein

Reputation: 31

Swiper-slide displays vertically instead of 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.

Upvotes: 3

Views: 3368

Answers (2)

Akshay Shriram
Akshay Shriram

Reputation: 41

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

"<link rel="stylesheet" href="https://unpkg.com/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.

Upvotes: 4

KUMAR
KUMAR

Reputation: 330

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();

Upvotes: 2

Related Questions