Implement Swiper In React JS

Swiper is the free, most cutting-edge touch slider for mobile devices, including hardware-accelerated transitions and fantastic native behavior.
It is designed to be utilized in mobile web applications, native and hybrid mobile apps, as well as mobile webpages. Designed primarily for iOS, but excellent on the newest Android, Windows Phone 8, and contemporary desktop browsers
 Swiper is a modern touch slider that is exclusively focused on modern apps and platforms in order to provide the best experience and simplicity; as such, it is not compatible with other platforms.

In this article, we will implement Swiper in react js.

First, we should install Swiper in our application

npm i swiper

Import this package into our application

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css'
import 'swiper/modules/pagination/pagination.min.css'

You can see how to implement swiper

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css'
import 'swiper/modules/pagination/pagination.min.css'
import image1 from './../assets/image1.jpg'
import image2 from './../assets/image2.jpg'
import image3 from './../assets/image3.jpg'

export default function sliderAnimation() {
    return (
        <Swiper
            spaceBetween={50}
            slidesPerView={3}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
        >
            <SwiperSlide><img src={image1} /></SwiperSlide>
            <SwiperSlide><img src={image2} /></SwiperSlide>
            <SwiperSlide><img src={image3} /></SwiperSlide>
            <SwiperSlide><img src={image1} /></SwiperSlide>
        </Swiper>
    )
}

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories