With swiper, the slidesPerColumn is set to 2 and the slidesPerView is set to 3, but three rows still appear. How

yongaird 注册会员
2023-02-28 13:37

Part of the answer references GPT, GPT_Pro better solve the problem
When using swiper plug-in, How do you get three rows when the slidesPerColumn is set to 2 and the slidesPerView is set to 3?

This is because the slidesPerColumn property represents the number of slides in each column. When there are 2 slides in each column(that is, the slidesPerColumn is set to 2), the slidesPerView property represents how many slides there are in each page. In this case, if there are three slides in each page(that is, the slidesPerView is set to 3), three rows appear.

That is, if you want only 2 rows to appear, you need to set slidesPerView to 6(2 * 3 = 6) to get it.

The specific code is as follows:

// 初始化swiper实例
var swiper = new Swiper('.swiper-container', {
    // 设置每一列中有2个slide
    slidesPerColumn: 2, 
    // 设置每一页有6个slide
    slidesPerView: 6, 
    spaceBetween: 10, // 间隔距离

If the answer is helpful, please accept it.

chenw456 注册会员
2023-02-28 13:37

The slidesPerColumn and slidesPerView are related, and can be calculated using the following formula: slidesPerView * slidesPerColumn = Total. So, when you set the slidesPerColumn to 2 and the slidesPerView to 3, the total number is 6, which means that you will end up with 3 rows.

About the Author

Question Info

Publish Time
2023-02-28 13:37
Update Time
2023-02-28 13:37

Related Question