Home > AI > Frontend > Swiper >

slidesPerColumnFill

If you want to set two rows in a slider, then you can try this code in React.

Example

import React from "react";
import {Container} from 'react-bootstrap'


// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css"



// import Swiper core and required modules
import SwiperCore, {Pagination} from 'swiper/core';

// install Swiper modules
SwiperCore.use([Pagination]);


export default function SectionBody() {
    return (
        <div className="body">
            <Container>
                <Swiper 
                slidesPerView={3} 
                slidesPerColumn={2} 
                slidesPerColumnFill= {"row"} // important!
                spaceBetween={30} 
                pagination={{
                    "clickable": true
                }} 
                className="mySwiper">
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>
                <SwiperSlide>Slide 5</SwiperSlide>
                <SwiperSlide>Slide 6</SwiperSlide>
                <SwiperSlide>Slide 7</SwiperSlide>
                <SwiperSlide>Slide 8</SwiperSlide>
                <SwiperSlide>Slide 9</SwiperSlide>
            </Swiper>

            </Container>
        </div>
    )
}

Leave a Reply